Выберите элемент, если у него нет предка данного класса, используя только селектор

Предположим, что у меня есть следующий HTML:

<div class="foo">
  <ul>
    <li>One</li>
    <li>Two</li>
  </ul>
</div> <!-- not originally here -->
<div class="bar">
  <ul>
    <li>Three</li>
    <li>Four</li>
  </ul>
</div>

Я хочу выделить все элементы li, которые не являются потомками элемента с классом foo. Я знаю, что могу сделать это с помощью fancy функции фильтрации, но мне интересно, могу ли я сделать это с помощью только селектора. Сначала я попробовал:

$(":not(.foo) li")

К сожалению, это не работает, поскольку li имеет других предков без стиля (в этом случае ul). Кажется, что работает следующее:

$(":not(.foo) :not(.foo) li")

Другими словами, выберите все элементы li, у которых нет предка, который либо имеет класс foo, либо имеет собственный предок с классом foo. Возможно, это лучший/единственный способ сделать это с помощью селектора, но я не в восторге от повторения селектора :not. Какие-нибудь лучшие идеи там?

fiddle

Ответ 1

Вы можете сделать это так:

$("li").not('.foo li')

http://jsfiddle.net/y7s54/

или

$("li:not(.foo li)")

http://jsfiddle.net/QpCYY/

Выберите все li, у которых нет предка с классом foo

Ответ 2

Попробуйте li:not(.foo > ul > li); который выбирает все lis минус те, у которых есть родительский .foo на два уровня вверх.

Ответ 3

Вы можете сделать это, используя контекст вместе с селектором, как показано ниже,

$('li', $('div:not(.foo)'))

LIve Demo

$('li', $('div:not(.foo)')).each(function(){
    alert($(this).text());
});

Ответ 4

Как насчет этого:

$("li:not(.foo > li)")

Комментарии в документах весьма полезны, если это не работает:

http://api.jquery.com/not-selector/

Ответ 5

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

$("li").not(".foo li")

скрипка