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

Posted 2023-02-21

【中文标题】仅获取未隐藏的元素.. Jquery

【英文标题】：Get only the elements which are not hidden.. Jquery

【发布时间】：2012-12-06 15:33:30

【问题描述】：

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

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

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

 

【问题讨论】：

真正值得花一个小时（或两个小时，max）从头到尾阅读jQuery API documentation。您会发现各种您不知道的事情（包括 Rory 指出的 :visible 选择器）。

【参考方案1】：

使用:visible 选择器：

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

【讨论】：

@RoryMcCrossan，但问题是“......隐藏和显示......”。我的意思是，我不是在争论文档。我已阅读它们，这就是我发表此评论的原因，因为此解决方案“不是问题的确切答案”

@Pisek 我不确定你的意思。 OP 说他目前正在获取所有元素（隐藏和显示），他想改变这种行为，以便选择器只返回显示的元素 - 这正是我的回答所做的。

@RoryMcCrossan，本期题目为Get only the elements which are not hidden.. Jquery。在 :visible 的 jQuery 文档中：Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout.。因此，正如我之前所说：您的答案不正确...您将选择可见 或隐藏 的元素。您只会省略 display: none 元素。

@RoryMcCrossan，对不起，但没有；）你的答案是错误的。同样，问题是...但只需要显示而不是隐藏...。您的代码不适用于隐藏元素！这与语义无关 - hidden 是隐藏的，not-displayed 是不显示的。对此要严格。您的代码仅适用于未显示的元素。伙计，我刚刚向你展示了你所犯的错误。如果您想修复它，请按照您喜欢的方式进行操作。我只是来这里寻找一个问题的答案，对不起，答案是错误的。

【参考方案2】：

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

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

但请注意 jQuery 的工作原理。来自 jQuery 文档：

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

具有可见性的元素：隐藏或不透明度：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");