Consulte el siguiente marcado:
<div class="careersIntegration__listing" id="careers-listing"> <div class="careersIntegration__accordion"> <div class="careersIntegration__accordion-header"> <span class="careersIntegration__accordion-dept">Sales</span> </div> <div class="careersIntegration__accordion-jobs" data-dept="sales"></div> </div> <div class="careersIntegration__accordion"> <div class="careersIntegration__accordion-header"> <span class="careersIntegration__accordion-dept">Customer Success</span> </div> <div class="careersIntegration__accordion-jobs" data-dept="customer-success"> <figure class="careerCard" data-dept="customer-success">Job</figure> </div> </div> </div> Estoy tratando de ocultar .careersIntegration__accordion que tienen elementos .careersIntegration__accordion-jobs que no tienen hijos.
Para simplificar, si .careersIntegration__accordion-jobs no tiene elementos secundarios, oculte el elemento principal .careersIntegration__accordion .
He visto ejemplos en publicaciones SO existentes (ver este), pero no puedo hacer que el enfoque funcione en mi instancia. Vea las publicaciones a continuación que he probado:
Con mi enfoque actual a continuación, se ejecuta la declaración else , ¿no está seguro de por qué?
$(".careersIntegration__accordion").each(function(){ if( $(this).children(".careersIntegration__accordion-jobs").length == 0 ){ $(this).parent().hide(); } else{ console.log('has children'); } });Contrariamente a su suposición
$(this).children(".careersIntegration__accordion-jobs")
no devuelve los elementos secundarios de los elementos que usan la clase CSS careersIntegration__accordion-jobs . De hecho, solo devuelve los elementos reales usando esta clase CSS. Si desea tener sus hijos, debe agregar otra llamada a .children() .
Por ejemplo:
$(".careersIntegration__accordion").each(function() { if ($(this).children(".careersIntegration__accordion-jobs").children().length == 0) { $(this).hide(); } else { console.log('has children'); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="careersIntegration__listing"> <!-- this should be hidden --> <div class="careersIntegration__accordion"> <div class="careersIntegration__accordion-header"> <span class="careersIntegration__accordion-dept">Sales</span> </div> <div class="careersIntegration__accordion-jobs"></div> </div> <!-- this should not be hidden --> <div class="careersIntegration__accordion"> <div class="careersIntegration__accordion-header"> <span class="careersIntegration__accordion-dept">Tech</span> </div> <div class="careersIntegration__accordion-jobs"> <div>item</div> </div> </div> </div>Puede usar html() para obtener la información que necesita y luego verificar si es igual a una cadena vacía:
$(this).children(".careersIntegration__accordion-jobs").html() === ''¡Eso debería hacer el truco!
Porque $(this).children(".careersIntegration__accordion-jobs").length solo cuenta los elementos con la clase careersIntegration__accordion-jobs , pero desea inspeccionar los hijos de estos elementos.
El siguiente código funciona:
$(document).ready(function(){ $(".careersIntegration__accordion .careersIntegration__accordion-jobs").each(function(){ console.log("children().length="+$(this).children().length); if( $(this).children().length == 0 ){ $(this).hide(); console.log('no children'); } else{ console.log('has children'); } }); });