JQuery - select children who have certain styles

Question

I do not know how to select the first range in the following example.

<div class="sp"> <span style="visibility:hidden">abc</span> <span>xyz</span> </div> 

I tried using this one, it didn’t work.

 $('div.sp span[visibility=hidden]') // not work 

thanks!

Answer 1

 $('div.sp span[style="visibility:hidden"]') 

See Attribute Selector

Answer 2

In your selector, you did not specify an attribute name ( style ), and there were no quotes, wrapping the full selector. try it

 $("div.sp span[style='visibility:hidden']"); 

If you want to find a hidden range, I would suggest you use this because the attribute selector will try to match visibility:hidden as it is. If there is any space between this value, it will fail. The :hidden selector searches for an element that is not visible or display is none .

 $("div.sp span:hidden") 

Answer 3

Get the first range :

 $('div.sp span:first'); 

If you want to get the first range with visibility: hidden , this is different:

 $('.sp span[style="visibility:hidden"]:first');