When using jQuery for DOM operations, sometimes you need to operate on DOM elements with hidden styles. In this case, you need to obtain the hidden tags. So how does jQuery get hidden tags?
The first thing you need to understand is that jQuery provides two ways to obtain hidden tags, namely .hidden
and .not(:visible)
. Next, we will introduce these two methods in detail.
.hidden
In jQuery, .hidden
is a special selector that can select anything with display: none;
style element. The following is how to use .hidden
:
$(".hidden") // 选取具有 hidden 类的元素
For example, we can get the element with id
as test
through the following code:
<div id="test" class="hidden">这是一个隐藏元素</div>
var element = $("#test.hidden");
The element
variable in the above code will be the div
element with id
being test
because it has hidden
Class.
.not(:visible)
If the element's display
value is none
, Then .hidden
is a good choice. However, if the element is hidden using visibility: hidden
or opacity: 0
, etc., then the .hidden
selector cannot be used. At this time, we can use .not(:visible)
to get the hidden tag.
.not(:visible)
is the negated version of the :visible
selector, which selects invisible elements, including using display:none ;
, or set visibility to hidden elements. The following is how to use .not(:visible)
:
$(":not(:visible)") // 选取具有不可见样式的元素
For example, we can use the following code to get the id
for test
Element:
<div id="test" style="visibility: hidden;">这是一个不可见的元素</div>
var element = $("#test").not(":visible");
The element
variable in the above code will be the div
element with id
being test
, because It's not visible.
Summary
Both of the above methods can be used to obtain hidden tags, but you need to choose the appropriate method based on how the element is hidden. .hidden
can select elements equal to display: none;
, while .not(:visible)
can select all hidden elements, including using display :none;
, or set visibility to hidden elements.
In short, getting hidden tags in jQuery is a very common operation. Mastering the above method can make us more comfortable in actual development.
The above is the detailed content of How to get hidden tags in jquery. For more information, please follow other related articles on the PHP Chinese website!