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

<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)');

Ответы

Ответ 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 -->

Ответ 2

с использованием подстановочных знаков

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

или

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

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