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

AGamePlayer • 4 年前 • 1502 次点击

$('div') 会找到所有的 <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 .有什么办法吗?

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/133052

文章 [ 3 ] | 最新文章 4 年前

• 1 楼

freedomn-m 4 年前

假设:

我想查询出所有不是小孩任何其他部门的

你可以使用选择器

:not(div) > div

可以与jQuery、document一起使用。querySelectorAll或CSS(因此不需要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>

• 2 楼

Nick Vu 4 年前

你可以尝试用这种方法来过滤所有元素 div 父母出去了。

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

• 3 楼

Carsten Løvbo Andersen 4 年前

你可以使用 .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>

登录后回复