如何使用 jQuery 查询不被任何其他 div 元素包含的 div 元素？

Question

$('div') 将查找所有

元素。

但是，我想查询这样的情况：

<div class="shoud_be_in_query">
  <div> test </div>
</div>
<section>
  <div class="shoud_be_in_query">
      <div> test </div>
  </div>
  <div class="shoud_be_in_query">
      <div> test </div>
  </div>
</section>
<section>
  <section>
    <div class="shoud_be_in_query"> test </div>
  </section>
</section>

我想查询所有不是任何其他 div 子级的 div 。有什么办法可以做到这一点吗？

Answer 1

您可以使用.filter()，例如：

$("div").filter(function() {
  return $(this).parent()[0].tagName !== "DIV"
})

演示

console.log($("div").filter(function() {
  return $(this).parent()[0].tagName !== "DIV"
}).length)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shoud_be_in_query">
  <div> test </div>
</div>
<section>
  <div class="shoud_be_in_query">
    <div> test </div>
  </div>
  <div class="shoud_be_in_query">
    <div> test </div>
  </div>
</section>
<section>
  <section>
    <div class="shoud_be_in_query"> test </div>
  </section>
</section>

Answer 2

您可以尝试这种方式来过滤掉所有具有 div 父元素的元素。

$('div').filter((index, element) => $(element).parent()[0].localName !== 'div')

Answer 3

假设：

我想查询所有不是任何其他div的子的div

您可以使用可以与 jQuery、document.querySelectorAll 或 CSS 一起使用的选择器

:not(div) > div

（因此不需要 js，具体取决于什么）你需要它）

示例：

console.log($("div").length)
console.log($(":not(div) > div").length)
console.log($(":not(div) > div").filter(".shoud_be_in_query").length == $(":not(div) > div").length)
console.log($(":not(div) > div").filter(":not(.shoud_be_in_query)").length == 0)


console.log(document.querySelectorAll(":not(div) > div").length)

:not(div)>div {
  border: 1px solid red;
}

div {
  border: 1px solid blue;
  margin: 2px;
  padding: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shoud_be_in_query">
  <div> test </div>
</div>
<section>
  <div class="shoud_be_in_query">
    <div> test </div>
  </div>
  <div class="shoud_be_in_query">
    <div> test </div>
  </div>
</section>
<section>
  <section>
    <div class="shoud_be_in_query"> test </div>
  </section>
</section>