jquery sélectionnant tous les derniers éléments d'un menu imbriqué menu liste non ordonnée ... pas seulement le: dernier-enfant

Question

J'ai du mal à comprendre cela. J'ai un menu de liste non ordonné que je veux styler tous les derniers éléments avec une icône de dossier et styliser tous les éléments extensibles (parent) avec une image de plus.gif. Je voulais simplement changer la classe en utilisant .addclass() en utilisant jquery, qui contiendra le css pour ajouter l'image de fond. Mon code jquery ci-dessous sélectionne seulement le ": last-child", qui place une icône de dossier sur le dernier élément de la liste. Je dois placer une icône de dossier devant tous les «li» qui n'ont pas d'enfants, et placer une icône plus devant tous ceux qui ont des enfants. Y a-t-il un moyen d'accomplir cela?

Voici mon HTML:

<ul id="nav"> 
<li>Heading 1 
    <ul> 
    <li>Sub page A 
    <ul> 
    <li>Sub page A - 1 
     <ul> 
     <li>A - 1: 0</li> 
     <li>A - 1: 1</li> 
     <li>A - 1: 2</li> 
     </ul> 
    </li> 
    <li>Sub page A - 3</li> 
    <li>Sub page A - 2</li> 
    </ul> 
    </li> 
    <li>Sub page B</li> 
    <li>Sub page C 
    <ul> 
    <li>Sub page C - 1 
     <ul> 
     <li>C - 1: 0</li> 
     <li>C - 1: 1</li> 
     <li>C - 1: 2</li> 
     </ul> 
    </li> 
    <li>Sub page C - 3</li> 
    <li>Sub page C - 2</li> 
    </ul> 
    </li> 
    </ul> 
</li> 
<li>Heading 2 
    <ul> 
    <li>Sub page D</li> 
    <li>Sub page E</li> 
    <li>Sub page F</li> 
    </ul> 
</li> 
<li>Heading 3 
    <ul> 
    <li>Sub page G</li> 
    <li>Sub page H</li> 
    <li>Sub page I</li> 
    </ul> 
</li> 
</ul> 

Voici le code jquery:

$(function(){ 

//add class to last item in each list 
$('#nav li').find('li:last').addClass('menu_last_child'); 
}); 

Answer 1

Cela ajoutera votre classe à tous les li « s qui ne sont pas des enfants

$("#nav li:not(:has(li))").addClass('menu_last_child'); 

Cette va ajouter une classe à tous les li qui ont des enfants

$("#nav li:has(li)").addClass("menu_parent"); 

Gardez également à l'esprit qu'il existe une différence entre :last et :last-child. Le premier sélectionnera uniquement le dernier élément de l'ensemble retourné correspondant au sélecteur, tandis que le dernier renverra tous les éléments qui sont les derniers dans le contexte de leur parent (même que le sélecteur css :last-child)