Seleziona elemento meno che non abbia un antenato di una data classe utilizzando solo un selettore

Question

Supponiamo che io ho il seguente codice 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> 

voglio selezionare tutti li elementi che sono non discendenti di un elemento con classe foo. So che posso farlo con una fantasia filter function, ma mi chiedo se posso farlo solo con un selettore. Per prima cosa ho provato:

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

Purtroppo questo non funziona in quanto la li ha altri antenati senza lo stile (il ul in questo caso). Il seguente sembra funzionare;

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

In altre parole, selezionare tutti li elementi che non hanno antenato che o ha classe foo o ha un antenato proprio con classe foo. Forse questo è il migliore/unico modo per farlo con un selettore, ma non mi entusiasma della ripetizione del selettore :not. Qualche idea migliore là fuori?

fiddle

Answer 1

Si può fare in questo modo

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

http://jsfiddle.net/y7s54/

o

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

http://jsfiddle.net/QpCYY/

Seleziona tutti di Li che non hanno un antenato con classe foo

Answer 2

ne dite di questo:

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

I commenti nei documenti sono molto utili se questo non funziona:

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

Answer 3

Prova li:not(.foo > ul > li); che seleziona tutti gli assi meno quelli con un genitore.

Answer 4

È possibile farlo utilizzando contesto insieme con selettore come sotto,

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

LIve Demo

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

Answer 5

penso che questa soluzione sembra un po 'più bello, ma c'è un po' di polemica sul Commenti API sulle differenze di velocità.

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

fiddle