Выберите точный элемент, а не его потомки

Question

У меня есть такое меню;

<ul>
 <li><a>1</a></li> 
 <li><a>2</a>
  <ul>
   <li><a>3</a></li>
   <li><a>4</a></li>
   <li><a>5</a></li>
   <li><a>6</a>
    <ul>
     <li><a>7</a></li>
     <li><a>8</a></li>
     <li><a>9</a></li>
    </ul> 
   </li>
  </ul>
  <li><a>10</li>
</ul>

Если я хочу сделать выбор на 2-м уровне с помощью jQuery.

$('ul li ul li') { action() }

Но когда я это сделаю, это действие также примут его дети, (я не хочу, чтобы это произошло).

Я просто хочу выбрать (ul li ul li).

С помощью jQuery, как мне заставить его работать?

Answer 1

Самый простой способ решить эту проблему - дать внешнему <ul> идентификатор или идентификатор класса CSS.Затем используйте прямой селектор потомков

$('ul.className > li > ul > li') // CSS class className

или

$('#id > li > ul > li') // id id

Answer 2

Вы имеете в виду, что хотите выбрать li с 3, 4, 5 и 6?Если это так, присвойте их родителю (второй уровень) ul s идентификатор и используйте селектор прямого потомка с ним:

$('ul#second_level_ul > li')

Answer 3

Но когда я это сделаю, это действие также примут его дети, (ul li ul li ul li) Я не хочу, чтобы это произошло.

Use eq селектор для выбора конкретного li:

$('#mainmenu li ul li').eq(5)............

Или его вариант:

$('#mainmenu li ul li:eq(5)')............

Answer 4

Вы говорите об обработчике кликов, который применяется только к самому элементу, а не к элементам, содержащимся в нем? Я бы предложил использовать классы и добавить обработчик кликов к подэлементам, который предотвращает всплытие события, используя stopPropagation . Последнее необходимо, потому что при нажатии на внутренний элемент событие также будет инициировано для его родителя. Если вы действительно хотите, чтобы обработчик вызывался только тогда, когда вы щелкаете по самому элементу и ни по одному из его дочерних элементов, вам нужно остановить всплытие события.

$('ul.secondlevel li').click( function() {
     // do something
} );

$('ui.thirdlevel li').click( function(e) {
       // do something else
       e.stopPropagation();
});

Answer 5

$('ul > li > ul > li').action()

Но вам нужно каким-то образом привязать верхний уровень ul ... с помощью идентификатора, например.

$('#menu > li > ul > li').action()