Find first invisible block by jQuery

HTML:

<div style="display:block">Text</div>
<div style="display:block"&开发者_高级运维gt;Text</div>
<div style="display:none">Text</div>
<div style="display:none">Text</div>
<div style="display:none">Text</div>

How do I find first invisible block and make it visible?

If there is no invisible block, do nothing.

$('div:hidden:first').show();

• div the element-selector^[docs]

• :hidden the hidden-selector^[docs]

• :first the first-selector^[docs]

Use this:

$('div:hidden:first').show();

jQuery has the :visible and :hidden selectors:

$('#wrapperContainer > div:hidden:first').show();

(Recommend a wrapper container because if you just do 'div:hidden:first' it will get the first hidden div on the page, which probably isn't what you want)