In JQuery, how can I select a hidden element?

Question

Hi,I have a question. How can I select the which display is none?

Given code like this:

<p id="p1">
<span id="test1" style="display:none">test1</span> 
<span id="test2" >test2</span> 
</p>

I can select the whose id is test1 by using $("span[id='test1']"),<br/>, but it does not work when i use $("span[style='display:none']").<br/>.

Is there any method to get this element at a time?

Thanks a lot.

Answer 1

You are looking for the :hidden selector

Please note that the proper way of selecting an element by ID is simply:

$("#test1");

Doing it the way you are doing is making jQuery do unnecessary parsing and is much slower.

If you want to select #test1 only if it is hidden, you do this:

$("#test1:hidden");

If you wanted to select all <span> elements that are hidden under #p1, you do this:

$("span:hidden", "#p1");

As noted in the comments, the opposite of this selector is the :visible selector:

$("span:visible", "#p1");

Would then select any visible <span> elements in the element #p1.