how do i display the first hidden div with a specific class with jQuery?

So i have this situation ....

<div class="nested_fields"></div>
<div class="nested_fields" style="display: none;"></div>
<div class="nested_fields"></div>
<div class="nested_fields"></div>
<div class="nested_fields" style="display: none;"></div>
<div class="nested_fields" style="display: none;"></div>
<div class="nested_fields" style="display: none;"></div>

I want to display show the first nested_fields div that开发者_C百科 is not hidden...so in the above situation it would be the second div with Jquery

$(".nested_fields:hidden").first().show();

or as $(".nested_fields") returns an array of objects you can also do:

$(".nested_fields:hidden")[0].show();

or using only selectors:

 $(".nested_fields:hidden:first").show();

try this

$('.nested_fields:hidden:first')