单击链接时，使用jQuery克隆具有备用颜色的列表项

替换克隆列表项颜色的最简单方法是什么

每次单击链接时，我都希望列表项被克隆并添加到列表的底部，但列表上的每个其他项都应该添加“highlight”类

这是一个链接，我做了所有的事情，除了交替颜色部分

以下是生成的html的外观示例：

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

一些文本
一些文本
一些文本
一些文本
一些文本
一些文本

谢谢

<a href="#">Add More</a>
<ul>
    <li>some text</li>
</ul>    

$('a').click(function() {
    var link = $('ul li:first').clone();
    if($('ul li').length % 2 != 0) {
        link.addClass("highlight");
    }
    link.appendTo('ul');
    return false;
});


一些文本

$（'a'）。单击（函数（）{
var link=$（'ul li:first'）.clone（）；
如果（$（'ul li'）。长度%2！=0）{
link.addClass（“突出显示”）；
}
链接。附录（“ul”）；
返回false；
});

一些文本

$（'a'）。单击（函数（）{
var link=$（'ul li:first'）.clone（）；
如果（$（'ul li'）。长度%2！=0）{
link.addClass（“突出显示”）；
}
链接。附录（“ul”）；
返回false；
});

给你

给你

看看这个。基本上，获取最后一个成员，查看它是否设置了highlight，并切换highlight类

$('a').click(function() {
    var newNode = $('ul li:last').clone();
    newNode.toggleClass('highlight');
    newNode.appendTo('ul');
    return false;
});

看这个。基本上，获取最后一个成员，查看它是否设置了highlight，并切换highlight类

$('a').click(function() {
    var newNode = $('ul li:last').clone();
    newNode.toggleClass('highlight');
    newNode.appendTo('ul');
    return false;
});

这是一个例子

---

---

这里有一个。

为什么不使用CSS来突出显示您的行呢？我同意，CSS是有意义的，除非您希望每个奇数/偶数行的颜色更灵活。我需要更灵活地突出显示li的行。使用已接受的解决方案，我只能克隆li的highlited，而使用仅css的解决方案，整个列表必须具有li的替代颜色。为什么不使用css高亮显示行？我同意，css是有意义的，除非您希望每个奇数/偶数行的颜色更灵活。我需要更灵活地高亮显示li的行。使用已接受的解决方案，我只能克隆li的highlited，而使用仅css的解决方案，整个列表必须具有li的替代颜色。如果

.attr

调用中已经存在另一个类，我可能会在其中添加处理+1无论：）您选择.attr（）而不是.addClass（）的任何特定原因？只是好奇：）啊，是的-samccone-answer

s

addClass`更适合添加该类。@近战-没有理由，我更改了它-

addClass

better@Marek卡巴兹好酷，我想知道是否有性能优势或其他什么。如果

.attr

调用中已经存在另一个类，我可能会在其中添加处理+1无论：）您选择.attr（）而不是.addClass（）的任何特定原因？只是好奇：）啊，是的-samccone-answer

s

addClass`更适合添加该类。@近战-没有理由，我更改了它-

addClass

better@MarekKarbarz好的很酷，我想知道是否有性能优势或其他什么。哇，这真是一种聪明的做事方式，唉，虽然它的灵活性有限，但你的代码看起来不错，唯一的一点是每次点击都会复制整个列表。您刚才没有添加“：first”。其他人认为这是目前为止最好的解决方案。谢谢@klikerko，如果你查看我最初的帖子和jsfiddle，我首先在那里找到了

：但后来编辑、删除了它，并让你自己选择要克隆的
li
他。无论如何，我把它放回去了。@klikerko，我的代码和公认的答案在性能上都是相似的。我的chrome实际上更快，代码更少。谢谢侯赛因，我决定选择马瑞克的代码，因为它给了我更多的灵活性。他的代码只突出显示新的li，所以如果我在开始时有10个列表项，然后我克隆了一个，那么新的列表项将突出显示。我知道这不是要求，但我喜欢这个想法。这两种解决方案都很好，我喜欢你的代码，因为它可读性更强，而且更短。不幸的是，我只能选择一个作为最终解决方案。再次感谢您对这一点的帮助，并做了额外的步骤来比较这两种解决方案。哇，这真是一种聪明的方法，唉，尽管它的灵活性有限。Hi Hussein，您的代码看起来不错，唯一的一点是它在每次单击时都会复制整个列表。您刚才没有添加“：first”。其他人认为这是目前为止最好的解决方案。谢谢@klikerko，如果你查看我最初的帖子和jsfiddle，我首先在那里找到了
：但后来编辑、删除了它，并让你自己选择要克隆的
li
他。无论如何，我把它放回去了。@klikerko，我的代码和公认的答案在性能上都是相似的。我的chrome实际上更快，代码更少。谢谢侯赛因，我决定选择马瑞克的代码，因为它给了我更多的灵活性。他的代码只突出显示新的li，所以如果我在开始时有10个列表项，然后我克隆了一个，那么新的列表项将突出显示。我知道这不是要求，但我喜欢这个想法。这两种解决方案都很好，我喜欢你的代码，因为它可读性更强，而且更短。不幸的是，我只能选择一个作为最终解决方案。再次感谢您在这方面提供的帮助，并进行了额外的步骤来比较这两种解决方案。