In jQuery, how can I select a hidden element?

Question

How can I select the <span> where display is set to none in the below code?

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

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

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

Thanks a lot.

Solution

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.