12

是否可以使用 jquery 将自动数字类添加到列表中？

html:

<ul id="list">
 <li>Element 1</li>
 <li>Element 2</li>
 <li>Element 3</li>
 <li>Element 4</li>
 <li>Element 5</li>
</ul>

我想得到这样的东西：

<ul id="list">
 <li class="1">Element 1</li>
 <li class="2">Element 2</li>
 <li class="3">Element 3</li>
 <li class="4">Element 4</li>
 <li class="5">Element 5</li>
</ul>

希望有可用的解决方案:-)

编辑

好的，嗯，但我的列表末尾并不总是一个数字。那么类名组合又如何呢，比如“item + number”？这样的事情可能吗？

<ul id="list">
 <li class="item1">Element x</li>
 <li class="item2">Element c</li>
 <li class="item3">Element a</li>
 <li class="item4">Element d</li>
 <li class="item5">Element f</li>
</ul>
4

6 回答 6

20 
   $("#list li").each(function(i) {
     this.addClass("item"+(i+1));
    });

这是在行动

http://jsbin.com/ocake

根据评论更新，如示例链接中所示：

$(document).ready(function() {
        $("#list li").each(function(i) {
        $(this).addClass("item" + (i+1));
        });
      });

但我认为初始代码应该通过添加来工作：

this = $(this);

但不确定。

于 2010-04-15T14:49:26.230 回答
5 
$("#list").children().each(function(i) {
  $(this).addClass("prefix_" + (i+1));
});
于 2010-04-15T14:21:53.913 回答
2

CSS 2 有一些与数字类名相关的特殊规则。请参阅语法，特别是 G.1 中的“类”、G.2 中的“nmstart”以及 G.3 中的最后一个要点。

使用 .c1 到 .c5 类：

$('#list li').each(function(){
    $(this).addClass( 'c' + $(this).text().substr(-1) );
});

请注意，这假定 的最后一个字符<li>是数字。您可能需要针对您的确切用例进行调整（可能使用正则表达式）。

于 2010-04-15T14:23:00.750 回答
1

对于 jQuery 1.4.x：

$("#list > li").addClass(function(i){return "item" + (i + 1);});
于 2010-04-15T21:34:13.610 回答
0

好的，嗯，但我的列表末尾并不总是一个数字。那么类名组合又如何呢，比如“item + number”？这样的事情可能吗？

<ul id="list">
 <li class="item1">Element x</li>
 <li class="item2">Element c</li>
 <li class="item3">Element a</li>
 <li class="item4">Element d</li>
 <li class="item5">Element f</li>
</ul>
于 2010-04-15T14:35:44.193 回答
0 
$('ul#list li').each(function(){
  $(this).addClass( $(this).text().split(' ')[1] );
});
于 2010-04-15T14:21:42.583 回答