How to use jQuery to query div elements that are not contained by any other div elements?

user_1661640 0
Viewed 41

$('div') will find all the <div> elements.

However, I want to query such situation:

<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>

I want to query out all the div that is not a children of any other div. Is there any way to do that?

html jquery javascript
3 Answers

You can use the .filter() like:

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

Demo

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>

user_29432180

You can try this way to filter all elements having div parents out.

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

user_92015870

Assuming:

I want to query out all the div that is not a child of any other div

You can use the selector

:not(div) > div

which you can use with jQuery, document.querySelectorAll or CSS (so no need for js depending on what you need it for)

Example:

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>

user_21815140
Related