$('div') encontrará todos los elementos <div> .
Sin embargo, quiero consultar tal situación:
<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> Quiero consultar todos los div que no son hijos de ningún otro div . ¿Hay alguna manera de hacerlo?
Puedes usar .filter() como:
$("div").filter(function() { return $(this).parent()[0].tagName !== "DIV" })Manifestación
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>Puede probar de esta manera para filtrar todos los elementos que tienen padres div .
$('div').filter((index, element) => $(element).parent()[0].localName !== 'div')
Asumiendo:
Quiero consultar todo el div que no es hijo de ningún otro div
Puedes usar el seleccionador
:not(div) > divque puede usar con jQuery, document.querySelectorAll o CSS (por lo que no necesita js dependiendo de para qué lo necesite)
Ejemplo:
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>