Question

是否可以使用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>

Answer 1

   $("#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);

但不确定。

Answer 2

$("#list").children().each(function(i) {
  $(this).addClass("prefix_" + (i+1));
});

Answer 3

CSS 2有一些与数字类名相关的特殊规则。请参阅grammar，特别是G.1中的“class”，G.2中的“nmstart”以及G.3中的最后一个项目符号。

使用类.c1到.c5：

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

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

Answer 4

对于jQuery 1.4.x：

$("#list > li").addClass(function(i){return "item" + (i + 1);});

Answer 5

$('ul#list li').each(function(){
  $(this).addClass( $(this).text().split(' ')[1] );
});

Answer 6

好吧，嗯，但我的名单最后并不总是一个数字。那么什么是类名组合，比如“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>

jquery：addClass 1,2,3等auto到列表

修改

6 个答案: