jquery, выбрав все последние элементы списка неустановленного списка вложенных деревьев ... не только: последний-ребенок

Question

У меня возникли проблемы с этим. У меня есть меню неупорядоченного списка, в котором я хочу стилизовать все последние элементы с пиктограммой папки и стилизовать все расширяемые (родительские) элементы с изображением plus.gif. Я хотел просто изменить класс, используя .addclass(), используя jquery, который будет содержать css для добавления фонового изображения. В приведенном ниже jquery-коде вы выбираете «: last-child», который помещает значок папки в последний элемент в списке. Мне нужно поместить значок папки перед всеми «ли», которые не имеют детей, и поместите значок плюса напротив всех тех, у кого есть дети. Есть ли способ сделать это?

Вот мой 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> 

Вот код JQuery:

$(function(){ 

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

Answer 1

Это добавит свой класс всем li-х, которые не имеют детей

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

Это добавит класс всем li, в котором есть дети

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

Также имейте в виду, что существует разница между :last и :last-child. Первый будет выбирать только последний элемент в возвращаемом наборе элементов, соответствующих селектору, в то время как последний вернет все элементы, которые являются последними в контексте их родительского элемента (такие же, как css :last-child селектор)