Tengo este bloque HTML
<div class="abc"> <div class="xyz" style="display: none;">xyz</div> <div class="xyz" style="display: none;">xyz</div> <div class="xyz" style="display: none;">xyz</div> </div> <div class="abc"> <div class="xyz" style="display: none;">xyz</div> <div class="xyz" style="display: none;">xyz</div> <div class="xyz" style="display: block;">xyz</div> <div class="xyz" style="display: block;">xyz</div> </div>Quiero ocultar todo el div principal si contiene todo el div "display:none"; de lo contrario, quiero mostrar el div principal.
Este código utiliza JavaScript puro. Primero obtiene una lista de todos los elementos de la clase abc y crea listas para sus hijos. Luego los itera y verifica cualquier valor de display que no sea none . Si todos los hijos de un padre pasan cuando no hay none , finalmente configura el padre para que display: none de lo contrario, simplemente rompe el ciclo.
let abc = document.getElementsByClassName("abc"); let breaker; for(i = 0; i < abc.length; i++) { let children = abc[i].children; for(x = 0; x < children.length; x++) { let child = children[x]; if(child.style.display != "none") { breaker = true; } else { breaker = false } } if(breaker == true) {continue} abc[i].style.display = "none"; // Comment out to see effect } Agregué CSS simple a un violín para mostrarlo. Simplemente comente la última línea abc[i].style.display = "none"; para confirmar el efecto.
Compruebe si todos los niños muestran ninguno:
let parentDiv = // get parent div let childDivs = parentDiv.childNodes; let hideParent = true; for(let i = 0; i < childDivs.length; i++){ if(childDivs[i].style.display != "none"){ hideParent = false; break; } }Si es así, ocultar padre:
if(hideParent){ parentDiv.style.display = "none"; }Prueba así usando Jquery.
$(".abc").map(function(){ let flag = true; $(this).find(".xyz").map(function(){ if($(this).css("display") != "none"){ flag = false; } }); if(flag){ $(this).css("display", "none"); }else { $(this).css("display", "block"); } })