Question

我正在制作菜单，我需要从Jquery返回的元素列表中选择一个特定元素。

当我在控制台上运行时：

 $("[type='subMenu']")

这将返回4个匹配的子菜单元素。

<div type="subMenu" style="display:block">
<div type="subMenu" style="display:none">
<div type="subMenu" style="display:none">

现在，我只需要选择具有display:block

的元素

我试过

$("[type='subMenu']").css('display') == 'block'

但这会将false作为输出。

和

$("[type='subMenu']").css('display')

这是输出none

Answer 1

其他人已经指出了JQuery :visible选择器。但是，正如JQuery API documentation：

中所指出的，它存在一些性能问题

附加说明：


由于:visible是jQuery扩展而不是CSS规范的一部分，因此使用:visible的查询无法利用本机DOM querySelectorAll()方法提供的性能提升。要在使用:visible选择元素时获得最佳性能，请先使用纯CSS选择器选择元素，然后使用.filter(":visible")。

大量使用此选择器可能会影响性能，因为它可能会强制浏览器在确定可见性之前重新呈现页面。例如，使用类跟踪其他方法的元素可见性可以提供更好的性能。

如果您更愿意避免这些问题，则可以使用本机CSS选择器。在简单的普通JavaScript中，这可以帮到你：

document.querySelector("[type=subMenu][style*=display\\:block]");

或者，如果您需要一次选择多个元素：

document.querySelectorAll("[type=subMenu][style*=display\\:block]");

我相信JQuery中的等价物（我不使用它）将是：

$("[type=subMenu][style*=display\\:block]");

如果在这些代码上内嵌的唯一样式是display，那么您可以省略*属性选择器中的style。

Answer 2

试试这个：

console.log($("[type='subMenu']:visible")).

它将提供所有可见元素

Answer 3

您可以使用过滤器或伪类。

$("[type='subMenu']").filter(function(){
    this.style.display == 'block';
});

从项目列表Jquery中仅选择（display：block）元素

3 个答案: