简体   繁体   English

选择隐藏其子级的父元素

[英]Selecting the parent element that is hiding its children

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 . 例如,一组元素本质上是“隐藏的”,但不是因为它们具有display:none而是因为沿途的某个父级具有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 . 如果我只有一个子元素并且知道它是hidden ,那么我如何轻松找到导致它被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 ? 但是,有没有更简单的方法,也许通过一些选择器魔术

You can use .parents() then filter that to the last element that is hidden. 您可以使用.parents()然后将其过滤到隐藏的最后一个元素。

$(child).parents(":hidden").last().show();

it will select the parent element highest in the hierarchy that has display: none 它将在display: none的层次结构中选择最高的父元素display: none

Demo: http://jsfiddle.net/X9W2v/ 演示: http//jsfiddle.net/X9W2v/

Note, :hidden will also select elements with a width/height of 0. 注意, :hidden还将选择宽度/高度为0的元素。

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. 如果你只是想在最近或最远的,你可以用返回它.first().last()分别。


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()

This is how I would do it in plain JavaScript. 这就是我在纯JavaScript中的处理方式。 Somehow I feel it's cleaner than the jQuery solutions that involve loops or callbacks (Kevin B's one-liner looks great!). 不知何故,我觉得它比涉及循环或回调的jQuery解决方案更干净(Kevin B的单行代码看起来很棒!)。 The cons are, it's longer, and it doesn't check computed styles: 缺点是,它更长,并且不检查计算样式:

<div id="container">
    <div id="a" style="display: none;">A
        <div id="b">B
            <div id="c">C</div>
        </div>
    </div>
</div>
var currentNode = document.getElementById('c');
while(currentNode.parentNode && currentNode.style.display !== 'none') {
    currentNode = currentNode.parentNode;
}
alert(currentNode.id);

http://jsfiddle.net/nc4h2/ http://jsfiddle.net/nc4h2/

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM