jquery выбирает все последние элементы неупорядоченного списка меню вложенного дерева ... не только: last-child - PullRequest
Новая
       12

jquery выбирает все последние элементы неупорядоченного списка меню вложенного дерева ... не только: last-child

4 голосов
/ 24 марта 2010

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

Вот мой 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');
});

1 Ответ

4 голосов
/ 24 марта 2010

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

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

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

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

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

...