javascript 如何将类添加到特定的 li？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15223582/
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
How to add class to particular li?
提问by sandip
I have this HTML:
我有这个 HTML：
<ul class="how-long">
<li value="1">Any</li>
<li value="1">1 day</li>
<li value="2">Week end</li>
<li value="7">1 Week</li>
<li value="14">2 Week</li>
<li value="21">3 Week</li>
</ul>
On document ready I want to add new class to the 4th li element.
在文档准备好后，我想向第 4 个 li 元素添加新类。
This is what I tried:
这是我尝试过的：
$(".how-long li").slice(3).addClass('change-color');
If I put an alert as:
如果我将警报设为：
alert($(".how-long li").slice(3).html());
it gives me 1 weekwhich is right, but when I addclass the class is added to all li after 4th li.
它给了我 1 周的时间，这是正确的，但是当我 addclass 时，该类会在第 4 个 li 之后添加到所有 li 中。
I want to this without adding IDto each li element. I can hard code class in li element directly but I want to do it dynamicaly using jQuery.
我想要这个而不给每个 li 元素添加 ID。我可以直接在 li 元素中对类进行硬编码，但我想使用 jQuery 动态地完成它。
回答by mattytommo
To do it in one selector, use nth-childor eq:
要在一个选择器中完成，请使用nth-child或eq：
nth-childis considerably faster, see my jsPerf here: http://jsperf.com/nth-child-vs-eq
nth-child是相当快，看我jsPerf这里：http://jsperf.com/nth-child-vs-eq
nth-child:
nth-child：
$(".how-long li:nth-child(4)").addClass('change-color');
eq:
eq：
$(".how-long li:eq(3)").addClass('change-color');
The fundamental difference is that nth-childwill give you the 4th element of every itemwith that class (regardless of whether it is a child of the current item), whereas eqwill give you the children on the current item.
根本区别在于，nth-child它将为您提供该类的每个项目的第 4 个元素（无论它是否是当前项目的子项），而eq将为您提供当前项目的子项。
回答by Matt Cain
$(".how-long li").eq(3).addClass('change-color');
回答by André Al?ada Padez
slice doesn't return a jQuery object, therefore you can't use the method addClass. The right way to do what you intend is:
slice 不返回 jQuery 对象，因此您不能使用 addClass 方法。做你想做的正确方法是：
by index:
按索引：
$(".how-long li").eq(3).addClass('change-color');
by referencing value:
通过引用值：
$(".how-long li[value=7]").addClass('change-color');
回答by gregjer
If you want to use slice method you need to specify end attribute which you are missing
如果要使用 slice 方法，则需要指定缺少的结束属性
$(".how-long li").slice(3,4).addClass('change-color');
回答by Steven Burrows
It selects the 4th because Array index's start from 0.
它选择第 4 个，因为数组索引从 0 开始。
You could always use $('.how-long li:nth-child(4)');
你总是可以使用 $('.how-long li:nth-child(4)');
More information here: http://api.jquery.com/nth-child-selector/
回答by user1181942
You can use the nth-child selector:
您可以使用第n 个子选择器：
$(".how-long li:nth-child(4)").addClass('change-color');
alert($(".how-long li:nth-child(4)").html());
回答by Roger
Do it this way
这样做
$(".how-long li:nth-child(4)").attr({'class':'test'});
This will add class testto the 4th li
这将添加类test到第 4 li
Hope this heps
希望这有帮助
