See the following markup:
<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>I'm trying to hide .careersIntegration__accordion's which have .careersIntegration__accordion-jobs elements that have no children.
To simplify, if .careersIntegration__accordion-jobs has no children, hide the parent .careersIntegration__accordion element.
I've seen examples on existing SO posts (see this one), but cannot get the approach to work in my instance. See posts below which I have tried:
With my current approach below, the else statement is executed, unsure why?
$(".careersIntegration__accordion").each(function(){
if( $(this).children(".careersIntegration__accordion-jobs").length == 0 ){
$(this).parent().hide();
} else{
console.log('has children');
}
});Contrary to your assumption
$(this).children(".careersIntegration__accordion-jobs")
doesn't return the children of elements using the CSS class careersIntegration__accordion-jobs. In fact it only returns the actual elements using this CSS class. If you want to have it's children you need to append another call to .children().
For example:
$(".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>You could use html() to get the information you need and then check if it's equal to an empty string:
$(this).children(".careersIntegration__accordion-jobs").html() === ''
That should do the trick!
Because $(this).children(".careersIntegration__accordion-jobs").length just counts the elements with the class careersIntegration__accordion-jobs - but you want to inspect the children of these elements.
The following code works:
$(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');
}
});
});