Question

正如标题所说，我正在尝试将类.third附加到每个第3个克隆列表元素。我有一切工作 here on JSFiddle ，除了缺少添加类的代码。这是当前的代码：

HTML

<ul><li>some text</li></ul>

JS

$('li').live('click', function() {
    $(this).clone().appendTo('ul');
});

CSS

li:hover {
  cursor:pointer;
  text-decoration:underline;  
}

.third {
  color: #f00;
}

一开始只有一个列表项，但是，例如，在我对任何列表项单击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>

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

Answer 1

查看:nth-child()选择器（source）。你会想要使用像

这样的东西

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

Here is a fully working Demo

Answer 2

试试这个：

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

Answer 3

有关示例，请参阅jQuery nth-child documentation：

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

Answer 4

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

这个和其他答案的区别在于它不会重新遍历子节点。它在添加时将类应用于项目，因此产生的开销较小（但最小）。

Answer 5

nth-child(3)可能有点慢（请参阅jsPerf test =＆gt;慢50％）。您可以考虑使用index()：

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

使用jQuery将类附加到每个第3个克隆列表项

5 个答案: