Chọn yếu tố trừ khi nó có một tổ tiên của một lớp được sử dụng chỉ là một selector

Question

Giả sử tôi có HTML sau:

<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> 

Tôi muốn chọn tất cả li yếu tố đó là không hậu duệ của một phần tử với class foo. Tôi biết tôi có thể làm điều đó với một ưa thích filter function, nhưng tôi tự hỏi liệu tôi có thể làm điều đó chỉ với một bộ chọn. Đầu tiên tôi đã cố gắng:

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

Thật không may điều này không làm việc kể từ khi li có tổ tiên khác mà không có phong cách (các ul trong trường hợp này). Sau đây dường như làm việc;

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

Nói cách khác, chọn tất cả li yếu tố mà không có tổ tiên mà một trong hai có lớp foo hoặc có tổ tiên của riêng của mình với lớp foo. Có lẽ đây là cách tốt nhất/duy nhất để làm điều đó với một bộ chọn, nhưng tôi không hồi hộp về sự lặp lại của bộ chọn :not. Có ý tưởng nào tốt hơn không?

fiddle

Answer 1

Bạn có thể làm điều đó như thế này

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

http://jsfiddle.net/y7s54/

hoặc

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

http://jsfiddle.net/QpCYY/

Chọn tất cả của li mà không có một tổ tiên với lớp foo

Answer 2

Làm thế nào về điều này:

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

Các ý kiến ​​trong các tài liệu là khá hữu ích nếu điều này không làm việc:

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

Answer 3

Hãy thử li:not(.foo > ul > li); mà chọn tất cả lis trừ những người có cha mẹ .foo hai cấp lên.

Answer 4

Bạn có thể làm điều đó bằng bối cảnh cùng với selector như dưới,

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

LIve Demo

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

Answer 5

Tôi nghĩ rằng giải pháp này có vẻ một chút đẹp hơn, nhưng có một chút tranh cãi trên Nhận xét API về sự khác biệt về tốc độ.

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

fiddle