$('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?
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>You can try this way to filter all elements having div parents out.
$('div').filter((index, element) => $(element).parent()[0].localName !== 'div')
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>