javascript - 仅获取未隐藏的元素.. Jquery

Question

我只需要在 jquery foreach 循环中获取 show() 元素

在下面的代码中，我得到了所有带有类测试的元素（即）隐藏和显示......但只需要显示而不是隐藏一个......如何过滤并在这一行本身中获取它？？？？？？

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

 }

Answer 1

使用:visible选择器：

$('.element').find('.test:visible').each(function(index, loopelement) {
    // do stuff...
});

Answer 2

您可以使用jQuery 的 :visible选择器。

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

但请注意 jQuery 是如何工作的。来自 jQuery 文档：

如果元素占用了文档中的空间，则元素被认为是可见的。可见元素的宽度或高度大于零。

具有 visibility: hidden 或 opacity: 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");