javascript - 如何为特定的 li 添加类？

Question

我有这个 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>

准备好文档后，我想将新类添加到第 4 个 li 元素。

这是我尝试过的:

$(".how-long li").slice(3).addClass('change-color');

如果我将警报设置为:

alert($(".how-long li").slice(3).html());

它给了我 1 周，这是对的，但是当我添加类时，类会在第 4 里之后添加到所有里。

我想不向每个 li 元素添加 ID。我可以直接在 li 元素中硬编码类，但我想使用 jQuery 动态地进行。

Answer 1

要在一个选择器中执行此操作，请使用 nth-child 或 eq:

nth-child 相当快，在这里查看我的 jsPerf:http://jsperf.com/nth-child-vs-eq

第 n 个 child :

$(".how-long li:nth-child(4)").addClass('change-color');

eq:

$(".how-long li:eq(3)").addClass('change-color');

根本区别在于 nth-child 会为您提供具有该类的每个项目 的第 4 个元素(无论它是否是当前项目的子项) , 而 eq 会给你当前项目的 child 。