使用jQuery一类追加到每3个克隆的列表项

正如标题所说，我试图将类.third追加到每3个克隆的列表元素。我有一切工作here on JSFiddle除了缺少添加类的代码。下面是当前的代码：使用jQuery一类追加到每3个克隆的列表项

HTML

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

$('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>

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

来源

2011-05-03 Klikerko

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

这和其他答案之间的区别在于，它不重新移孩子的节点。它在添加时将类应用于该项目，因此导致更少的开销（尽管最小）。

来源

2011-05-03 20:47:02

这很好！谢谢Demain。 – Klikerko 2011-05-03 20:53:14

'addClass（''）'不会删除类（如果你点击一个已经有它的链接...）;使用'toggleClass'或其他修复程序。否则好主意，我把它在[性能测试]（http://jsperf.com/jquery-nth-child-vs-index）我写了一篇关于jsPerf – 2011-05-03 21:10:15

@丹：良好的渔获物 - 看到更新后的代码。我在测试中做出了改变，它仍然是最快的:) – 2011-05-03 21:18:03

的例子见jQuery nth-child documentation：

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

来源

2011-05-03 20:43:04 Orbling

看一看在:nth-child()选择（source）。你要使用类似

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

Here is a fully working Demo

来源

2011-05-03 20:43:21 Dutchie432

谢谢Dutchie432。 – Klikerko 2011-05-04 02:44:31

试试这个：

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

来源

2011-05-03 20:43:33

想说你需要首先放入一个'.removeClass（）'，然后编辑好。 – Orbling 2011-05-03 20:45:21

是'removeClass（）'真正需要的，因为所有的'

...

'被附加在底部？ – Dutchie432 2011-05-03 20:47:04

另外'：第n个孩子（3）'应该是'：第n个孩子（3N）'我相信 – Dutchie432 2011-05-03 20:47:25

nth-child(3)可以是有点慢（参见较慢jsPerf test => 50％）。你可以考虑使用index()：

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

来源

2011-05-03 20:50:32

感谢Dan对性能测试的额外步骤。 – Klikerko 2011-05-04 02:50:22

使用jQuery一类追加到每3个克隆的列表项

回答

相关问题