博客

如何使用jQuery选择HTML页面中所有可见或隐藏的元素

  • Post category:jquery

当需要选择HTML页面中所有可见或隐藏的元素时，可以使用jQuery的选择器和筛选器来实现。

步骤1：使用jQuery选择器选择所有元素

首先，使用jQuery选择器选择所有需要操作的元素。可见或隐藏的元素通常定义了相应的CSS样式，例如display:none或visibility:hidden。因此，可以使用以下选择器来选取这些元素，其中[属性*=值]指示该属性包含了指定的部分值。

$("[style*=display:none], [style*=visibility:hidden]")

上述代码使用了jQuery的属性选择器，选取了包含display:none或visibility:hidden属性的所有元素。该选择器可以匹配在样式表中定义的和内联样式中定义的元素。

步骤2：使用jQuery筛选器过滤可见或隐藏的元素

第二步是使用jQuery的筛选器过滤已经选取的元素，只选择可见或隐藏的元素。jQuery提供了一些内置筛选器，例如：visible，hidden，或者可使用自定义函数来实现筛选器。

使用内置筛选器

要筛选所有可见元素，可以使用jQuery的visible筛选器，如下所示：

$("[style*=display:none], [style*=visibility:hidden]").filter(":visible")

上述代码使用了jQuery的filter方法和visible筛选器，选取所有可见的元素。类似地，要筛选所有隐藏的元素，可以使用hidden筛选器：

$("[style*=display:none], [style*=visibility:hidden]").filter(":hidden")

使用自定义函数

要自定义筛选器函数，可以使用jQuery的filter方法和自定义函数。例如，以下代码会筛选出所有元素高度小于50像素的元素：

$("[style*=display:none], [style*=visibility:hidden]").filter(function() {
    return $(this).height() < 50;
})

上述代码使用了判断元素高度的自定义函数作为筛选器函数传递给了filter方法，只筛选出高度小于50像素的元素。

示例演示

下面将演示两个使用上述方法筛选可见或隐藏元素的示例。场景一：针对多个可见或隐藏元素，要统计它们的个数，如下所示：

<div style="display:none">元素1</div>
<div style="display:block">元素2</div>
<div style="visibility:hidden">元素3</div>
<div style="display:none">元素4</div>
<div style="display:block">元素5</div>

我们可以使用以下jQuery代码来筛选所有可见或隐藏元素，并统计它们的个数：

var hiddenCount = $("[style*=display:none], [style*=visibility:hidden]").filter(":hidden").length;
var visibleCount = $("[style*=display:none], [style*=visibility:hidden]").filter(":visible").length;
console.log("可见元素数为：" + visibleCount);
console.log("隐藏元素数为：" + hiddenCount);

控制台输出如下：

可见元素数为：2
隐藏元素数为：3

场景二： 针对隐藏的元素，当鼠标悬停在元素上时，将元素设为可见状态，如下所示：

<div style="display:none" class="hidden">元素1</div>
<div style="display:none" class="hidden">元素2</div>
<div style="visibility:hidden" class="hidden">元素3</div>
<div style="display:none" class="hidden">元素4</div>
<div style="visibility:hidden" class="hidden">元素5</div>

我们可以使用以下jQuery代码，在鼠标悬停时筛选出隐藏的元素，并将它们的display属性设置为block或者visible属性设置为visible来显示元素：

$(".hidden").mouseenter(function() {
    $(this).css({"display":"block", "visibility":"visible"});
});

上述代码中，首先选取带有class为hidden的元素，然后绑定mousecenter事件，当鼠标悬停在元素上时，将该元素的display属性设置为block或者visible属性设置为visible，从而显示该元素。

通过以上示例，我们可以看到，使用jQuery选择和筛选可见或隐藏的元素，可以帮助我们轻松地对多个元素进行批量操作，提高了开发的效率。

Tags: