[英]Select only (display:block) element from list of items Jquery
I'm making a menu and i need to select one particular element from a list of element returned by Jquery. 我正在做一个菜单,我需要从Jquery返回的元素列表中选择一个特定的元素。
When i run on console : 当我在控制台上运行时:
$("[type='subMenu']")
This returns 4 matching submenu elements. 这将返回4个匹配的子菜单元素。
<div type="subMenu" style="display:block">
<div type="subMenu" style="display:none">
<div type="subMenu" style="display:none">
Now, i need to select only the element having display:block
现在,我只需要选择具有display:block
的元素
I tried 我试过了
$("[type='subMenu']").css('display') == 'block'
but this give false
as output. 但这给出false
作为输出。
and 和
$("[type='subMenu']").css('display')
this is giving output as none
这是给作为输出none
Others have already pointed out the JQuery :visible
selector. 其他人已经指出了JQuery :visible
选择器。 However, there are some performance issues with it, as pointed out in the JQuery API documentation : 但是,正如JQuery API文档中指出的那样,它存在一些性能问题:
Additional Notes: 补充笔记:
- Because
:visible
is a jQuery extension and not part of the CSS specification, queries using:visible
cannot take advantage of the performance boost provided by the native DOMquerySelectorAll()
method. 因为:visible
是jQuery扩展而不是CSS规范的一部分,所以使用:visible
查询无法利用本机DOMquerySelectorAll()
方法提供的性能提升。 To achieve the best performance when using:visible
to select elements, first select the elements using a pure CSS selector, then use.filter(":visible")
. 为了在使用:visible
选择元素时达到最佳性能,请首先使用纯CSS选择器选择元素,然后使用.filter(":visible")
。- Using this selector heavily can have performance implications, as it may force the browser to re-render the page before it can determine visibility. 大量使用此选择器可能会对性能产生影响,因为它可能会迫使浏览器在确定可见性之前重新渲染页面。 Tracking the visibility of elements via other methods, using a class for example, can provide better performance. 通过其他方法(例如,使用类)跟踪元素的可见性可以提供更好的性能。
If you'd prefer to avoid those issues, you could use a native CSS selector, instead. 如果您希望避免这些问题,则可以使用本机CSS选择器。 In plain ol' normal JavaScript, this would do the trick for you: 在普通的JavaScript中,这将为您解决问题:
document.querySelector("[type=subMenu][style*=display\\:block]");
Or, if you need to select multiple elements at once: 或者,如果您需要一次选择多个元素:
document.querySelectorAll("[type=subMenu][style*=display\\:block]");
I believe the equivalent in JQuery (I don't use it) for both would be: 我相信两者在JQuery中的等效项(我不使用它)将是:
$("[type=subMenu][style*=display\\:block]");
If the only style that will ever be set inline on those tags is display
then you can omit the *
from the style
attribute selector. 如果将永远不会直列设置这些标签的唯一风格是display
,那么你可以省略*
从style
属性选择。
Try this: 尝试这个:
console.log($("[type='subMenu']:visible")).
It will give all visible elements 它将给出所有可见的元素
You can use filter or pseudo class. 您可以使用过滤器或伪类。
$("[type='subMenu']").filter(function(){
this.style.display == 'block';
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.