Sử dụng jQuery để lấy con cháu của một phần tử không phải là con của một vùng chứa với một lớp CSS nhất định

Question

Tôi có một tình huống mà tôi cần phải chọn tất cả con cháu của một phần tử nhất định, nhưng loại trừ container bằng với lớp CSS của vùng chứa tôi chạy bộ chọn của tôi trên đó.

Mô tả khá phức tạp.

<div class="container"> 
    <div class="element"></div> 
    <div class="element"></div> 
    <div class="element"></div> 
    <div class="element"> 
     <div class="container"> 
      <div class="element"></div> 
      <div class="element"></div> 
      <div class="element"></div> 
     </div> 
    </div> 

Chạy một jQuery .find ('yếu tố') trên DIV ngoài cùng sẽ làm cho tôi tất cả các DIV, ngay cả những người bên trong container thứ hai. Đó là những gì tôi cố gắng tránh.

Có giải pháp chọn jQuery nhanh chóng và đơn giản cho trường hợp này không?

Answer 1

Tôi nghĩ rằng những gì bạn muốn sử dụng là bộ chọn not. Như thế này ..

$(".container").not(".container .container") 

Cách khác, bạn có thể sử dụng bộ chọn children để giúp trẻ em ở một mức độ sâu. Mà sẽ exlclude divs lồng nhau.

Để rõ ràng hơn một chút, tôi nghĩ bạn sẽ muốn sử dụng bộ chọn không sau khi bạn sử dụng 'tìm'. Như thế này:

$(".container").find(".element").not($(".container .container .element")) 

Bạn có thể vượt qua một chức năng để không, vì vậy bạn có thể có mà chức năng nhìn vào cha mẹ của mỗi trận đấu yếu tố để xem nếu nó được lồng vào bên trong của một phần tử với cùng một lớp.

http://jsfiddle.net/QXfs2/6/

removeIfNested = function(index) { 
    // this is the corrent DOM element 
    var $this = $(this), 
     return_value = false; 

    $.each($this.attr('class').split(/\s+/), function(index) { 
     if ($this.parents("." + this).length > 0) { 
      return_value = default_value || true; 
     } 
    }); 

    return return_value; 
} 


$(".container").find(".element").not(removeIfNested); 

Nếu bạn có thể thêm một lớp học để container lồng nhau, đó sẽ là lý tưởng, sau đó nó chỉ là:

$(".container").find(".element").not($(".nested .element")) 

Giả sử bạn thêm lớp "lồng", để bạn bên trong container div.

Answer 2

Ví dụ cụ thể của bạn này sẽ làm việc -

$("body > div.container > .element") 

Điều đó sẽ chỉ nhận được những divs yếu tố cấp cao nhất. Nếu bộ sưu tập phần tử của bạn có cấu trúc khác, bạn có thể thay thế body bằng id vùng chứa của bộ sưu tập.

Demo - http://jsfiddle.net/QAP37/

Answer 3

Bạn có thể sử dụng jquery chọn như thế này:

find('*:not(.container .container *)')