2009-02-19 13 views
15

Got some code ici qui ne fonctionne pas:JQuery - Comment ajouter une classe à chaque dernier élément de la liste?

$("#sidebar ul li:last").each(function(){ 
     $(this).addClass("last"); 
}); 

Fondamentalement j'ai 3 listes et que vous souhaitez ajouter une classe (dernier) à chaque élément apparaissant dans chaque dernière liste non ordonnée.

<ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li class="last">Item 3</li> 
</ul> 

espoir qui fait sens, Vive!

+0

Cette classe supplémentaire est-elle utilisée pour ajouter une marge au bas de la liste? Si c'est le cas, vous pouvez simplement utiliser la propriété margin-bottom de ul à la place. Sinon, continuez. = P – EndangeredMassa

+0

De plus, vous n'avez pas besoin de faire '.each' dans ce cas, vous pouvez juste faire' .addClass' directement. jQuery appliquera toutes les commandes à l'ensemble des éléments correspondants. – cdmckay

+0

En outre, un bon site pour tester différents sélecteurs et voir comment ils fonctionnent peuvent être trouvés ici: http://www.woods.iki.fi/interactive-jquery-tester.html – cdmckay

Répondre

36

erreur facile à faire. Essayez ceci:

$("#sidebar ul li:last-child").addClass("last"); 

Fondamentalement: le dernier ne fait pas tout à fait ce que vous pensez qu'il fait. Il correspond seulement au dernier dans le document, pas le dernier dans chaque liste. Voilà pour quoi: le dernier enfant est pour.

+0

merci pour le pourboire, jamais trébuché sur ce maintenant – smoothdeveloper

+0

Parfait! - Merci d'avoir pris le temps de m'aider à sortir, merci beaucoup –

+0

très instructif, merci! – Heihachi

-1

vous pouvez essayer

$('#sidebar ul li:last').addClass('last'); 
3

La raison qui ne fonctionnera pas est due au fait que :last correspond seulement à un élément. À partir de la documentation jQuery:

Correspond au dernier élément sélectionné.

Alors, que votre code est en train de faire est d'obtenir un ensemble de tous les éléments d'un <li><ul> puis de cet ensemble en prenant la dernière valeur. Exemple:

<ul> 
    <li>1</li> 
    <li>2</li> 
</ul> 
<ul> 
    <li>3</li> 
    <li>4</li> 
</ul> 
<ul> 
    <li>5</li> 
    <li>6</li> 
</ul> 

Votre code renverrait l'élément <li>6</li>. (En interne, il collectera <li>1</li> à <li>6</li> puis enlèvera le dernier et le retournera).

Ce que vous cherchez est ce que les autres réponses ont dit: :last-child.

0

Ou vous pouvez donner un identifiant à votre liste et l'utiliser comme contexte pour jquery-call.

<ul id="myList"> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
</ul> 

<ul id="anotherList"> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
</ul> 

Et vous pouvez faire:

jQuery("li:last", "ul#myList").addClass("lastItem"); 

Maintenant, la dernière li dans la première liste aurait la classe "lastItem".

Modifier: Désolé, mal lu la question. Ignore ça s'il te plait.

4

avec jquery ajouter cette

$("ul li").last().addClass('last'); 
0

Si vous avez besoin, vous pouvez assigner une classe pour eux et utiliser chaque 'pour ajouter la classe 3 listes distinctes:

$('#sidebar ul.class li:last-child').each(function(e){ 
    $(this).addClass("last"); 
}); 

Cela devrait fonctionner exactement comme tu t'attendais.