jQuery .next（）div显示所有同级而不是一个

Question

I'm testing a pagination type where the buttons are on a separate div from the target.

When I try to toggle the next div of the body, all of them are toggling, instead of just one.

 $('#next_q').on('click', function(){ $('.question-item').hide().next('.question-item').show(); }) 

 .question-item:not(:first-child){display: none;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box-body"> <div class="question-item">Q1</div> <div class="question-item">Q2</div> <div class="question-item">Q3</div> </div> <div class="box-footer"> <button>Prev</button> <button id="next_q">Next</button> </div> 

Answer 1

use :visible to select the question-item that is currently visible

$('#next_q').on('click', function(){
    $('.question-item:visible').hide().next('.question-item').show();
})

also if you want it not to "skip" past the last element, use

if ($('.question-item:visible').prev('.question-item').length)

 $('#next_q').on('click', function() { if ($('.question-item:visible').next('.question-item').length) $('.question-item:visible').hide().next('.question-item').show(); }) $('#prev_q').on('click', function() { if ($('.question-item:visible').prev('.question-item').length) $('.question-item:visible').hide().prev('.question-item').show(); }) 

 .question-item:not(:first-child) { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box-body"> <div class="question-item">Q1</div> <div class="question-item">Q2</div> <div class="question-item">Q3</div> </div> <div class="box-footer"> <button id="prev_q">Prev</button> <button id="next_q">Next</button> </div> 

Answer 2

Check the current visible .question-item and hide it and then show the next .question-item . I also added the not last-child selector since I thought that you might want to stop at the last question.

  $('#next_q').on('click', function(){ $('.question-item:visible:not(:last-child)').hide().next('.question-item').show(); }); $('#prev_q').on('click', function(){ $('.question-item:visible:not(:first-child)').hide().prev('.question-item').show(); }); 

 .question-item:not(:first-child){display: none;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box-body"> <div class="question-item">Q1</div> <div class="question-item">Q2</div> <div class="question-item">Q3</div> </div> <div class="box-footer"> <button id="prev_q">Prev</button> <button id="next_q">Next</button> </div> 

Answer 3

You can use .data() to store an integer reflecting an index of the .question-item elements .length , use ++ and % operators to cycle the indexes passed to .eq() from current index or 0 through .question-items .length

 $('#next_q') .data({ "index": 0, items: $(".question-item") }) .on("click", function() { $(this).data().items .hide() .eq(++$(this).data().index % $(this).data().items.length) .show(); }) 

 .question-item:not(:first-child) { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <div class="box-body"> <div class="question-item">Q1</div> <div class="question-item">Q2</div> <div class="question-item">Q3</div> </div> <div class="box-footer"> <button>Prev</button> <button id="next_q">Next</button> </div>