循环遍历 DOM 并显示隐藏元素

Question

我有一组记录，它们被分成 5 个段，每个段都包裹在一个带有 id 和类的 div 周围。

例如

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

显示第一组 5 条记录，其余的则隐藏。 我在下面有一个链接，可以点击查看更多。点击后会显示另外 5 个等。

每个容器都有一个带有 Off 和 On 的类。这告诉我 div 正在显示什么 div 没有显示。

现在我想在每次点击时显示每组记录。 我已经完成了这段代码，但似乎没有用。我的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方法，如果要显示第一个类为Off的元素，可以使用:first选择器。

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