18

jquery foreach ループで show() 要素のみを取得する必要があります

以下のコードでは、クラス テスト (つまり、非表示と表示の両方) を持つすべての要素を取得しています...しかし、非表示ではなく表示のみが必要です...この行自体でそれをフィルタリングして取得する方法?????

$('.element').find('.test').each(function(index, loopelement) {

 }
4

2 に答える 2

34

:visibleセレクターを使用します。

$('.element').find('.test:visible').each(function(index, loopelement) {
    // do stuff...
});
于 2012-12-19T09:59:58.367 に答える
5

jQuery の :visibleセレクターを使用できます。

var $visibles = $(".element").find(".test:visible");

ただし、jQuery の仕組みに注意してください。jQueryのドキュメントから：

ドキュメント内のスペースを消費する場合、要素は可視と見なされます。可視要素の幅または高さが 0 より大きい。

可視性: 非表示または不透明度: 0 の要素は、レイアウト内のスペースを消費するため、可視と見なされます。

この動作がユース ケースに合わない場合は、jQuery を拡張して、独自のカスタム セレクターを作成できます。

$.expr[":"].reallyVisible =
    function reallyVisible (elem) {
        if (elem == null || elem.tagName == null) {
            return false;
        }

        if (elem.tagName.toLowerCase() === "script" || elem.tagName.toLowerCase() === "input" && elem.type === "hidden") {
            return false;
        }

        do {
            if (!isVisible(elem)) {
                return false;
            }

            elem = elem.parentNode;
        } while (elem != null && elem.tagName.toLowerCase() !== "html");

        return true;
    };

function isVisible (elem) {
    var style = elem.style;

    // Depending on your use case
    // you could check the height/width, or if it's in the viewport...
    return !(style.display === "none" || style.opacity === "0" || style.visibility === "hidden");
}

他の組み込みセレクターとして使用できます。

$(".element").find(".test:reallyVisible");
$(".element").find(".test:first").is(":reallyVisible");
于 2012-12-19T09:59:58.677 に答える