Как показать div один за другим после click (). Next () с помощью jquery

Question

У меня есть структура списка, подобная этой:

  <ul id="part">   
    <?php 
      $i=0; 
      foreach ($q as  &$value):
        $i++;
        $quid = $value->q_id;
        $ans= $this->mem->get_ans($quid);
        echo '<li id="div'.$i.'" class="ques" style="display: none;">';
        echo '  <h2>'.$i.' . '.$value->question.'</h2>';              
                foreach($ans as $answer):
                  echo '<label>';
                  echo '<input type="checkbox" value="'.$answer->ans_id.'" />';
                  echo $answer->ans_name;
                  echo '</label>';
                endforeach;
        echo '</li>';
      endforeach; ?>
      <button id="next">Next</button>
    </ul>

Я хочу следующее: Когда кто-то нажимает кнопку #next, тогда он показывает следующий элемент списка и далее.Как я могу добиться этого с помощью jQuery?

Answer 1

Переместите ваш тег <button> за пределы <ul> только <li> (элементы списка) действительны внутри неупорядоченного списка.

Ниже приведен код JavaScript (с использованием jQuery), необходимый для выполнения того, что вы просите:

$(function() {

    //cache the items for quicker access       
    var items = $('ul#part li');

    //bind your event to #next
    $('#next').click(function() {

       //Check if no elements are visible yet.
       if(items.filter(':visible').length == 0) {
         items.first().show();
       }
       else {
         //Otherwise, select the last visible one, 
         //then transverse to the next one and show it
         items.filter(':visible:last').next().show();
       }

    });

});

Answer 2

я использовал этот метод, чтобы показать элемент списка один за другим

     $(function(){             

  var i=2;
    $("#div1").show("slow");
     $('#next').click(function(){
         $('#div' + i).show('slow');
         var j=i-1;
         $('#div'+ j).hide('slow');
        i++;

     });


  });

         });