How To Hide Parent If Children Are Hidden?
Problem: I need a way in jQuery to hide a parent div if all the children in a list contained within said div are hidden. Context: I'm working on an employee portal that allows an a
Solution 1:
$(".resources-files-container")
.filter(function(){
return $(this).find("li:visible").length == 0;
})
.hide();
Filter the list of .resources-files-container
elements to just those with no visible li
elements and then hide that filtered set.
Solution 2:
Also include an else to toggle the visibility back on if the selection is changed:
functiontoggleContainersByChildren() {
$('.resources-files-container').each(function () {
if ($(this).find('li:visible').length === 0) { // note the three = signs
$(this).hide(); //hides the container if no children are visible
} else {
$(this).show(); //shows it again if the children are turned back on
}
});
}
toggleContainersByChildren(); //call this function to check your containers for visible children every time the filter is changed
Edit: Calling attention to the === equality sign...
Solution 3:
If I understand you correctly, you want to check if all the li
inside a div .resources-files-container
don't have the .filter-example-1
class...
So, it would be something like this:
//Select all div with this class, and iterate through them
$('.resources-files-container').each(function() {
//Checks if the number of li's with the specified class inside this div is "0"if($(this).find('li.filter-example-1').length == 0) {
//Hides the div, because there's no visible li in it.
$(this).hide();
}
});
Post a Comment for "How To Hide Parent If Children Are Hidden?"