JQuery селектор на основе дочернего

Question

Как бы я, в HTML ниже, выбрать все div, где ближайший дочерний элемент не является span?

<div>test</div> //should be selected
<div>test2</div> //should be selected
<div><span>test2<span/></div> //should not be selected

Answer 1

Вы можете использовать селекторы псевдокласса, такие как :has() и :not().

$("div:not(:has(span))").css("color","red");

  
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div>test</div> 
<div>test2</div> 
<div><span>test2</span></div> 

---

Если вы хотите игнорировать, только если первый дочерний узел является span, используйте метод filter().

$("div").filter(function() {
  // get all children nodes and check first node is span(assuming there isn't any comment node)
  return !$(this).contents().first().is('span');
}).css("color", "red");

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div>test</div>
<div>test2</div>
<div><span>test2</span></div>
<div>test3<span>test2</span></div>
<div> <span>test2</span></div>

Answer 2

Вы можете использовать jquery .not() и .has() метод.

$("div").not($("div").has("span")).css("color","red");

<div>test</div> 
<div>test2</div> 
<div><span>test2<span/></div> 
  
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>