Question

I want to show first element that is hidden by jquery. my html code is:

<ol>     <li>1</li>     <li style='display:none'>2</li>     <li style='display:none'>3</li>     <li style='display:none'>4</li>     <li style='display:none'>5</li>     <li><a class='add'>Add More ...</a></li> </ol> 

I want to show first hidden LI, each time that ‘a’ element was clicked. My solution is below. but I think better way exists.

$('a.add').click(function(){         var hiddens=$(':hidden',$(this).parent().parent());         if (hiddens.length>0)         {             hiddens.each(function(index,el){                 if(index==0)                 {                     $(this).slideToggle('fast');                 }             });         }          if (hiddens.length==1)         {             $(this).parent().hide();         } 

Tanx

Answer 1

Just add a :first selector after you get :hidden set so you get the first element from set found by :hidden selector

$('a.add').click(function(){     $(':hidden:first').slideToggle('fast'); });