Question

I feel like this could have been asked before, but I can’t seem to find it, so I’ll ask myself.

I want to select the parent element that is the “cause” of its children being hidden. For example, a group of elements are essentially “hidden” but not because they have display:none but because some parent along the way has display:none.

If I only have a child element and I know that it is hidden, how might I easily find the parent that is causing it to be hidden.

I realize one solution is just to recursively loop through the parents such as…

function findHiddenParent(el){
  var $el = $(el);
  if($el.css('display') == 'none'){
    return $el;
  }
  return findHiddenParent($el.parent());
}

Note I haven’t tested the above code, its just for conceptualizing a solution

But is there an easier way, perhaps through some selector magic?

Answer 1

Here’s something similar to what you’ve got:

function findHiddenParents ( el ) {
    return $(el).parents().filter(function () {
        return $(this).css('display') == 'none';
    });
}

This’ll return all ancestors that are hidden. If you only want the closest or the farthest, you can just return it with .first() or .last() respectively.

---

If you’re not actually interested in which elements are hidden, but just want to reveal them all, then you can’t get any simpler than this:

$(el).parents().show()