Javascript 如何在jQuery中只获取可见元素？

我试图通过使用jQuery只获取HTML中的可见元素。但问题是，它还选择了具有“可见性：隐藏”的元素

$（“p:visible”）。每个（函数（）{
var输入=$（此）；
控制台日志（输入）；
});

第1段内容如下

第2段内容如下

一些文本

一些文本

一些文本

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

具有可见性：隐藏的或不透明度：0的元素被视为可见的，因为它们仍然占用布局中的空间

visibility:hidden
实际上并不隐藏DOM中的元素，元素在DOM中占据空间，但这些元素是看不见的。与
显示的元素不同：无

如果你检查最后一段，你会发现它是可见的（根据上述规则）

解决方案

我们可以使用元素
可见性
和
不透明度
来检查元素是否实际可见。无需在下面的代码中检查
显示
属性，因为
：可见
将检查该属性


//使用：此处可见以筛选显示为：无的元素
$（'p:visible'）。每个（函数（）{
if（$（this.css（'visibility'）！='hidden'和&$（this.css（'opacity'）！=0）{
//可见元素
console.log（$（this.text（））；
}否则{
//元素实际上是不可见的
}
});

第1段内容如下

第2段内容如下

一些文本1

一些文本2

某些文本3
您可以将此作为起点。这不会考虑隐藏的父元素，但您可以将其调整为父元素

if ($elem.is(":visible") || $elem.css("visibility") == "visible" || $elem.css("opacity") == 1) {
    // do stuff
}

可见性为“隐藏”或不透明度为“0”的元素被视为可见，因为它们仍然占用布局中的空间。在隐藏某个元素的动画中，该元素在动画结束前被视为可见。
参考jquery：

您可以用另一种方式控制它：

$("p:visible").each(function () {
    if($(this).css('visibility') == "hidden") {
        console.log($(this));
    }
    var input = $(this);
    console.log(input);
});

还可以使用filter（）获取真正需要的元素


我希望有帮助

更新
不获取不透明度为0的元素


您可以编写一个名为
$.fn.isVisible
的jQuery插件，以确定元素是否符合您的标准


//检查元素可见性的jQuery插件。
$.fn.isVisible=函数（）{
返回此。不（“：hidden”）&&
this.css（'visibility'）！=='hidden'&&
this.css（'opacity'）！=0；
}
$（函数（）{
//过滤每个可见的段落。
$（'p'）.filter（函数（）{
返回$（this.isVisible（）；
}).each（函数（{
var项目=$（此项）；
控制台日志（项目）；
});
});

第1段内容如下

第2段内容如下

一些文本

一些文本

一些文本不确定您的观点。
display:none
或
opacity:0
的元素仍在DOM中，并且仍将通过查询返回。@Archer我的意思是，它们在DOM中，但看不见Nokay，我想我只是误读了您所说的内容，并采取了不同的方式。那么，你不打算建议一个解决方案，而只是解释发生了什么吗？
显示：无
检入
过滤器
不是必需的，因为
：可见
将对其进行过滤。实际上，此项不适用于不透明度：0，请参见此，不适用于
不透明度：0
。检查这里我可以有一些透明度为0.5的元素。这并不意味着它是不可见的，只需将检查更改为
$elem.css（“不透明”）>0
var visible = $('p:visible').filter(function() {
    return !($(this).css('visibility') == 'hidden' || $(this).css('display') == 'none');
});

visible.each(function() {
    console.log($(this).html()); 
});

var visible = $('p:visible').filter(function () {
    return !($(this).css('visibility') == 'hidden' || $(this).css('display') == 'none' || $(this).css('opacity') == 0 ); 
});

visible.each(function () {
    console.log($(this).html()); });