Utilisez jQuery pour cloner un élément de liste avec des couleurs secondaires lorsque vous cliquez sur le lien

Question

Quelle est la méthode la plus simple pour alterner les couleurs de l'élément de liste cloné? Chaque fois que je clique sur un lien, j'aimerais que l'élément de liste soit cloné et ajouté au bas de la liste, mais que tous les autres éléments de la liste aient une classe 'highlight' ajoutée.

C'est le lien vers Fiddle où j'ai tout fait excepté la partie de couleur alternante.

Voici un exemple comment html produit devrait ressembler à:

<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> 

Merci!

Answer 1

<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; 
}); 

Answer 2

Vous êtes ici

http://jsfiddle.net/BXzY5/2/

Answer 3

Voir cette updated fiddle. Fondamentalement, obtenir le dernier membre, voir s'il a mis en surbrillance, et basculer la classe de surbrillance.

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

Answer 4

$('#cloneli').click(function() { 
    $('#test li:first').clone().appendTo('ul'); 
    $('#test li:odd').addClass('highlight') 
}) 

est ici un working example.