Question

<div class="wrapper">
  <div class="A B">
    <span class="C">needed</span>
  </div>
  <div class="A B">
    <span class="D">not needed</span>
  </div>
  <div class="A B">
    <span class="E">needed</span>
  </div>
</div>

我需要所有没有子级跨度的div元素＆＃34; D＆＃34;。这个操作有jQuery选择器吗？

Answer 1

您可以使用.filter()：

＆＃13;

var divs = $('.A.B').filter(function(){
   return $(this).children('span.D').length === 0;
});

console.log(divs.text());

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="A B">
    <span class="C">needed</span>
  </div>
  <div class="A B">
    <span class="D">not needed</span>
  </div>
  <div class="A B">
    <span class="E">needed</span>
  </div>
</div>

＆＃13;

Answer 2

您可以结合使用 :has() 和 :not() 伪类选择器。可以使用 :has() 来检查所选元素是否包含任何特定元素，然后使用 :not() 选择器过滤掉它们。虽然可以像 @Jai 一样使用 filter() 方法。

＆＃13;

$('.A.B:not(:has(>.D))').css('color', 'red')

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="A B">
    <span class="C">needed</span>
  </div>
  <div class="A B">
    <span class="D">not needed</span>
  </div>
  <div class="A B">
    <span class="E">needed</span>
  </div>
</div>

＆＃13;

仅供参考： >(children selector)用于检查直接孩子，否则可能会检查嵌套，因此如果不是问题，您可以避免。

选择具有没有特定类的子元素的元素列表

2 个答案: