使用jQuery向每三个克隆的列表项追加一个类

正如标题所说，我试图在每三个克隆的列表元素中添加一个class.third。除了缺少添加类的代码之外，我的一切都正常工作。以下是当前代码：

HTML

CSS

开始时只有一个列表项，但是，例如，在我单击任何列表项5次后，我希望有如下html：

<ul>
  <li>some text</li>
  <li>some text</li>
  <li class="third">some text</li>
  <li>some text</li>
  <li>some text</li>
  <li class="third">some text</li>
</ul>

任何帮助都将不胜感激。谢谢

有关示例，请参见：

$('li:nth-child(3n)').addClass('third');

有关示例，请参见：

$('li:nth-child(3n)').addClass('third');

查看：n子选择器。你会想用类似的东西

$('ul li:nth-child(3n)').addClass('third');

查看：n子选择器。你会想用类似的东西

$('ul li:nth-child(3n)').addClass('third');

试试这个：

$('li').live('click', function() {
    $(this).clone().appendTo('ul');
    $('ul li').removeClass("my-class");
    $('ul li:nth-child(3n)').addClass("my-class");
});

试试这个：

$('li').live('click', function() {
    $(this).clone().appendTo('ul');
    $('ul li').removeClass("my-class");
    $('ul li:nth-child(3n)').addClass("my-class");
});

此答案与其他答案之间的区别在于它不会重新遍历子节点。它在添加项时将类应用于该项，因此产生的开销较小，但最小

此答案与其他答案之间的区别在于它不会重新遍历子节点。它在添加时将类应用于项，因此产生的开销较小，尽管开销很小。

nth-child3可能有点慢，请参见=>50%。你可以考虑使用：

nth-child3可能有点慢，请参见=>50%。你可以考虑使用：

---

我想说你需要先放一个.removeClass，很好的编辑。真的需要这个removeClass吗。。。是否要追加到底部？另外，：nth-child3应该是：nth-child3n我相信Hi Phil，看起来您的代码只会将类添加到第三个列表项，但我需要将此类追加到每个第三个列表项。是的，这是真的。相应地更新了。我想说你需要先放一个.removeClass，很好的编辑。真的需要这个removeClass吗。。。是否要追加到底部？另外，：nth-child3应该是：nth-child3n我相信Hi Phil，看起来您的代码只会将类添加到第三个列表项，但我需要将此类追加到每个第三个列表项。是的，这是真的。相应更新。addClass不会删除该类，以防您单击已包含该类的链接。。。；使用toggleClass或其他修复程序。除此之外，这是个好主意，我把它写在了我写的jsPerf@dan：良好捕获-请参阅更新的代码。我在你的测试中做了更改，它仍然是最快的：addClass不会删除该类，以防你点击已经有它的链接。。。；使用toggleClass或其他修复程序。除此之外，这是个好主意，我把它写在了我写的jsPerf@dan：良好捕获-请参阅更新的代码。我在您的测试中做了更改，它仍然是最快的：

$('li').live('click', function() {
    $(this).clone().removeClass('third').appendTo('ul')
        .addClass($('ul').children().length % 3 == 0 ? 'third' : '');
});

$('li').live('click', function() {
  var $clone = $(this).clone().appendTo('ul');
  $clone.toggleClass('third', $clone.index() % 3 == 2);
});