jquery: addClass 1,2,3 等 auto 到列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2646058/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery: addClass 1,2,3 etc. auto to a list
提问by Svensson
is it possible, to add auto numeric classes to a list by using jquery?
是否有可能使用 jquery 将自动数字类添加到列表中？
html:
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>
i want to get something like this:
我想得到这样的东西：
<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>
hope there is a solution available :-)
希望有可用的解决方案:-)
Edit
编辑
ok, mhhm but my list has not always a number at the end. so what's about a classname combination, like "item + number" ? is something like this possible?
好的，嗯，但我的清单最后并不总是一个数字。那么类名组合怎么样，比如“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>
回答by ant
$("#list li").each(function(i) {
this.addClass("item"+(i+1));
});
Here it is in action
这是在行动
Update per comments, as in example link this works :
更新每条评论，如示例链接中所示：
$(document).ready(function() {
$("#list li").each(function(i) {
$(this).addClass("item" + (i+1));
});
});
But I think initial code should work by adding :
但我认为初始代码应该通过添加：
this = $(this);
But not sure.
但不确定。
回答by Jeriko
$("#list").children().each(function(i) {
$(this).addClass("prefix_" + (i+1));
});
回答by Annika Backstrom
CSS 2 has some special rules relating to numeric class names. See the grammar, specifically "class" within G.1, "nmstart" in G.2, and the final bullet point in G.3.
CSS 2 有一些与数字类名称相关的特殊规则。请参阅语法，特别是 G.1 中的“class”、G.2 中的“nmstart”以及 G.3 中的最后一个要点。
Using classes .c1 through .c5:
使用类 .c1 到 .c5：
$('#list li').each(function(){
$(this).addClass( 'c' + $(this).text().substr(-1) );
});
Note that this assumes the very last character of the <li>is a number. You may have to tweak (possibly using regex) for your exact use case.
请注意，这假定 的最后一个字符<li>是数字。您可能需要针对您的确切用例进行调整（可能使用正则表达式）。
回答by Kobi
For jQuery 1.4.x:
对于 jQuery 1.4.x：
$("#list > li").addClass(function(i){return "item" + (i + 1);});
回答by Svensson
ok, mhhm but my list has not always a number at the end. so what's about a classname combination, like "item + number" ? is something like this possible?
好的，嗯，但我的清单最后并不总是一个数字。那么类名组合怎么样，比如“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>
回答by clyfe
$('ul#list li').each(function(){
$(this).addClass( $(this).text().split(' ')[1] );
});
