JQuery - правило для "не содержит элемент"

Я хочу создать правило для таргетинга на элемент a следующим образом:

<ul id="root">
   <li>
      <a href="item.html">Root Menu Item</a>
   </li>
</ul>

Однако это не должно применяться, если элемент li содержит другой элемент ul, например:

<ul id="root">
   <li>
      <a href="#">Sub Menu</a>
      <ul>
         <li>
            <a href="item.html">Sub Menu Item</a>
        </li>
      </ul>
   </li>
</ul>

Я создал событие по мере необходимости, но ему нужно работать только с элементами меню "root".

Я знаю, что могу добавить атрибут id только для целевого элемента, но плагин меню, который установил мой клиент, нелегко настраивается.

Ответы

Ответ 1

Если вы соответствуете a, выполните следующие действия:

var result  = $('#root > li:not(:has(ul)) > a');

Если вы хотите разрешить более глубокие вложенные элементы <ul> и просто хотите проверить, чтобы убедиться, что только прямые дети не имеют <ul>, вы можете сделать это:

var result  = $('#root > li:not(:has(> ul)) > a');

EDIT:

Чтобы иметь более одного селектора одновременно, отделите их запятой внутри кавычек:

var result  = $('#root > li:not(:has(> ul)) > a, #someOtherElement');

Ответ 2

$('#root a').click(function(e) {
    if ( $(this).parents('ul').length > 1 ) {
       e.preventDefault(); // cancel action for anchors inside of #root who have multiple parent list elements 
    }
});

Измените логику на каждое требование.