JQuery: выбрать все элементы, которые не являются потомками определенного класса

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>

Можете ли вы помочь мне выбрать все элементы:

• которые являются потомками '.container "'
• не является потомком '.x'
• не имеет самого класса .x.

---

Глядя на HTML выше; следует выбрать элементы 5,6,7 и 9

• Элемент 1 имеет класс "X"
• Элементы 2 являются прямым потомком элемента с классом "X" (Элемент 1)
• Элементы 3 и 4 являются потомками элемента с классом "X" (Элемент 1)

Элемент 8 имеет класс "X"

---

У меня есть этот селектор, но он продолжает выделять потомков (глубоких потомков) элемента класса "X"

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

Answer 1

Это должно сделать это:

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

Редактировать: Вернуться к первой ревизии снова.Я думал, что это не сработало, но у вас есть ошибка в вашем HTML, которая делает #1 родителем всех элементов, поэтому ни один не выбран.

<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

с использованием групповых символов *

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

или

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

может работать.