Looping через DOM и показать скрытые элементы

Question

У меня есть группа записей, которые разбиты на сегменты по 5, каждая из которых обернута вокруг div с id и классом.

например.

<div id="myid" class="myclass"> 
<p>record1</p> 
<p>record2</p>  
</div> 

Первый набор из 5 записей отображается, а остальные скрыты. У меня есть ссылка внизу, которая нажата для получения дополнительной информации. После нажатия будет показано еще 5 и т. Д.

В каждом контейнере есть класс с выключенным и включенным. Это говорит мне, что показывает div и что div isnt.

Теперь я хочу показать каждый набор записей при каждом индивидуализированном щелчке клика. Я сделал этот код, но, похоже, не работает. Мои знания в jquery ограничены.

$(document).ready(function() { 

// get first reviewBulkContainer and show 
$(".reviewBulkContainer:first").show().addClass("On"); 

$("#showMoreReviews").click(function (e) { 
    e.preventDefault(); 
    $("#reviewContainer .reviewBulkContainer").each(function() { 
     if ($(this).hasClass("Off")) { 
      $(this).show(); 
      $(this).removeClass("Off"); 
      $(this).addClass("On"); 
      return; 
     } 

    }); 
}); 

Но это в конечном итоге показывает все сегменты записи, а не только один как раз. Может ли кто-нибудь помочь мне в этом?

Благодаря ...

Answer 1

Там нет необходимости использовать each метод, вы можете использовать :first селектор, если вы хотите, чтобы показать первый элемент с классом Off.

$("#showMoreReviews").click(function (e) { 
    e.preventDefault(); 
    $("#reviewContainer .reviewBulkContainer.Off:first") 
              .show() 
              .toggleClass("Off On"); 
});