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.

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.