Javascript 仅获取未隐藏的元素。。滑动分页

我只需要在jqueryforeach循环中获取show（）元素

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

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

 }

使用选择器：

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

$.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");

您可以使用选择器

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

但是要知道jQuery是如何工作的。从jQuery文档：

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

可见性为“隐藏”或不透明度为“0”的图元视为可见， 因为它们仍然会占用布局中的空间

如果此行为不适合您的用例，您可以扩展jQuery，创建自己的自定义选择器：

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

$.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");

它可以用作任何其他内置选择器：

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

$.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");

---

它真的值得花一个小时（最多两个小时）来从头到尾地阅读。你会发现各种你不知道的事情（包括罗里指出的

：可见的
选择器）。@rorymcrossan，但问题是“…既隐藏又显示…”。我的意思是，我不是在争论那些文件。我已经读过了，这就是为什么我做出这样的评论，因为这个解决方案“并不是问题的答案”@Pisek我不知道你的意思。OP说他目前正在获取所有元素（隐藏和显示），他希望改变这种行为，使选择器只返回显示的元素，这正是我的答案。@RoryMcCrossan，本期的标题是
仅获取未隐藏的元素。。Jquery
。而在jQuery文档中，对于：visible:
元素，可见性为：hidden或不透明性为0的元素被认为是可见的，因为它们仍然会占用布局中的空间。
。所以，正如我之前所说：你的答案是不正确的。。。您将选择可见或隐藏的图元。您将只忽略display:none元素。@RoryMcCrossan，抱歉，但不；）你的答案是错的。同样，问题是…但只需要显示，而不是隐藏一个。。。。你的代码对隐藏元素无效！这与语义无关-隐藏是隐藏的，不显示是不显示的。对此要严格。您的代码仅适用于未显示的元素。伙计，我刚刚告诉你你犯的错误。如果你想修好它，你想怎么做就怎么做。我来这里只是想找到一个问题的答案，很抱歉，答案是错的。