jQuery: Chọn tất cả các yếu tố mà không phải là hậu duệ của một lớp nào đó

Question

<div class="container" id = "0" > 
    <div class="x" id = "1"> 
     <div id = "2"> 
     <p id = "3"> 
      <span id = "4" >text</span> 
     </p> 
     <div> 
    </div> 

    <div id="5"> 
     <div id="6"> 
     <p id="7"> 
      <span class="x" id="8" >text</span> 
      <span id="9">text</span> 
     </p> 
     <div> 
    </div> 
<div> 

bạn có thể giúp tôi để chọn tất cả các yếu tố:

• đó là hậu duệ của' .container "'
• không hậu duệ của '.x'
• không có lớp '.x' riêng của mình.

---

Nhìn vào HTML ở trên; nó nên chọn các yếu tố 5,6,7 và 9

• Yếu tố 1 có lớp "X"
• Elements 2 là con trực tiếp của một phần tử-với-class "X" (Yếu tố 1)
• Elements 3 và 4 là hậu duệ một yếu tố-với-class "X" (Yếu tố 1)

Yếu tố 8 có lớp "X"

---

Tôi có selector này nhưng nó vẫn không ngừng lựa chọn con cháu (con sâu) của phần tử với class "X"

var elements = $('.container').find().parents(':not(.X)').andSelf().filter(':not(.X)'); 

Answer 1

này nên làm điều đó:

$('.container').find(':not(.x):not(.x *)'); 

Edit: Đã hủy để sửa đổi đầu tiên lần nữa. Tôi nghĩ rằng nó đã không làm việc theo cách này, nhưng bạn có một lỗi trong HTML của bạn mà làm cho #1 cha mẹ của tất cả các yếu tố, do đó, không ai được chọn.

<div class="container" id = "0" > 
    <div class="x" id = "1"> 
     <div id = "2"> 
     <p id = "3"> 
      <span id = "4" >text</span> 
     </p> 
     <div> <!-- <-- must be a closing div tag --> 
    </div> 

    <div id="5"> 
     <div id="6"> 
     <p id="7"> 
      <span class="x" id="8" >text</span> 
      <span id="9">text</span> 
     </p> 
     <div> <!-- <-- must be a closing div tag --> 
    </div> 
<div> <!-- <-- must be a closing div tag --> 

Answer 2

sử dụng ký tự đại diện hoặc

$(".container :not(* .x)") 

hoặc

$(":not(* .x)", ".container") 

có thể làm việc.