Javascript 从项目列表Jquery中仅选择（显示：块）元素

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

当我在控制台上运行时：

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

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

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

但这会将

false

作为输出

及

---

这将输出为

none

您可以使用过滤器或伪类

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

试试这个：

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

---

它将给出所有可见元素

其他人已经指出JQuery

：visible

选择器。但是，它也存在一些性能问题，如中所述：

附加说明：

• 由于

  ：visible

  是jQuery扩展，而不是CSS规范的一部分，因此使用

  ：visible

  的查询无法利用本机DOM

  querySelectorAll（）方法提供的性能提升。要在使用
  ：visible
  选择元素时获得最佳性能，请首先使用纯CSS选择器选择元素，然后使用

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

如果您希望避免这些问题，可以使用本机CSS选择器。在普通的普通JavaScript中，这将为您带来好处：

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

或者，如果需要同时选择多个图元：

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

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

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

---

如果在这些标记上内联设置的唯一样式是

display

，则可以从

样式

属性选择器中省略

*

。

$（'[type=subMenu]：visible'）

将只返回可见元素，谢谢！您已经解决了。请务必阅读@billyonecan链接页面上的其他注释，以了解有关使用该方法的性能因素的一些信息。

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

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