1

以前に聞いたことがあるような気がしますが、見つからないようですので、自問してみます。

子が非表示になる「原因」である親要素を選択したいと思います。たとえば、要素のグループは本質的に「非表示」ですが、それが存在するためではdisplay:noneなく、途中の親がが存在するためdisplay:noneです。

子要素しかない場合、それがであることがわかっている場合hidden、それを引き起こしている親を簡単に見つけるにはどうすればよいでしょうかhidden。

1つの解決策は、次のような親を再帰的にループすることです...

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

上記のコードはテストしていません。ソリューションを概念化するためだけのものです。

しかし、おそらくセレクターの魔法を使って、もっと簡単な方法はありますか？

4

3 に答える 3

4

それを使用.parents()して、非表示の最後の要素にフィルターをかけることができます。

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

階層で最上位の親要素を選択しますdisplay: none

デモ: http://jsfiddle.net/X9W2v/

:hidden幅/高さが 0 の要素も選択されることに注意してください。

于 2013-01-24T19:51:18.003 に答える
3

これは、プレーンな JavaScript で行う方法です。どういうわけか、ループやコールバックを含む jQuery ソリューションよりもすっきりしているように感じます (Kevin B のワンライナーは見栄えがします!)。短所は、より長く、計算されたスタイルをチェックしないことです:

<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/

于 2013-01-24T19:55:10.993 に答える
3

これはあなたが持っているものに似たものです：

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

これにより、非表示になっているすべての祖先が返されます。最も近いものまたは最も遠いものだけが必要な場合は、それぞれ.first()またはで返すことができ.last()ます。

どの要素が非表示になっているかに実際には関心がなく、すべてを明らかにしたい場合は、これより簡単なことはありません。

$(el).parents().show()
于 2013-01-24T19:50:49.090 に答える