Javascript 如何使用jquery显示具有多个不同div的所有数据的每2项？

我想每个div显示3个项目，其中许多div与单击链接加载更多的操作不同。 我的代码如下：

<div class="wadah" id="list_1">
    <a href="" class="wadah__item" id="list_item_1_1">
        aaa
    </a>

    <a href="" class="wadah__item" id="list_item_1_2">
        bbb
    </a>
    <a href="" class="wadah__item" id="list_item_1_3">
        ccc
    </a>
    <a href="" class="wadah__item" id="list_item_1_4">
        ddd
    </a>
    <a href="" class="wadah__item" id="list_item_1_5">
        eee
    </a>
    <a href="" class="wadah__item" id="list_item_1_6">
        fff
    </a>
    <div id="loadMore" class="LoadMore">Load more 1</div>
</div>

<div class="wadah" id="list_2">
    <a href="" class="wadah__item" id="list_item_2_1">
        2_a
    </a>

    <a href="" class="wadah__item" id="list_item_2_2">
        2_b
    </a>
    <a href="" class="wadah__item" id="list_item_2_3">
        2_c
    </a>
    <a href="" class="wadah__item" id="list_item_2_4">
        2_d
    </a>
    <a href="" class="wadah__item" id="list_item_2_5">
        2_e
    </a>
    <a href="" class="wadah__item" id="list_item_2_6">
        2_f
    </a>

    <div id="loadMore" class="LoadMore">Load more 2</div>
</div>

我希望每个链接加载更多的点击，然后出现的项目是2从每个div

---

链接演示：

您需要根据单击的元素筛选出

wadah\u项目

元素。因此，获取单击元素的父元素并获取其中的隐藏元素。要获取第一个

2

子项，您可以使用公式

-n+2

（选择第二个和第一个子项）

$（函数（）{
$（“.wadah.wadah_uu项：第n个子（-n+2）”）.slideDown（）.css（'display'，'flex'）；
$（“.LoadMore”）。在（'click'，函数（e）{
e、 预防默认值（）；
$（this）.parent（）.find（“.wadah\uuu项：隐藏”）.slice（0,2）.slideDown（）.css（'display'，'flex'）；
if（$（this）.parent（）.find（“.wadah\uu项：隐藏”）.length==0）{
$（这个）。淡出（“慢”）；
}
$（'html，body'）。设置动画({
scrollTop:$（this）.offset（）.top
}, 2000);
});
});
.wadah{
利润率：30px0；
}
.wadah__项目{
边框：1px实心#ddd；
边界顶部：无；
填充：1rem；
}
.wadah__项目{
显示：无；
}
#荷德莫尔{
颜色：绿色；
光标：指针；
}
#加载更多：悬停{
颜色：黑色；
}
#炫耀的{
颜色：红色；
光标：指针；
显示：无；
}
#悬停{
颜色：黑色；
}

加载更多1
加载更多2
您可以使用并仅从按钮的同级菜单中选择

$(function () {
        $(".wadah__item").slice(0, 2).slideDown().css('display', 'flex');
        $(".LoadMore").on('click', function (e) {
            e.preventDefault();
          let sibs = $(this).siblings(".wadah__item:hidden");
            sibs.slice(0, 2).slideDown().css('display', 'flex');

            if (sibs.length == 0) {
                $(this).fadeOut('slow');
            }

            $('html,body').animate({
                scrollTop: $(this).offset().top
            }, 2000);
        });
    });

$(function() {
  $(".wadah .wadah__item:nth-child(-n + 2)").slideDown().css('display', 'flex');
  $(".LoadMore").on('click', function(e) {
    e.preventDefault();

    $(this).parent().find(".wadah__item:hidden").slice(0, 2).slideDown().css('display', 'flex');

    if ($(this).parent().find(".wadah__item:hidden").length == 0) {
      $(this).fadeOut('slow');
    }

    $('html,body').animate({
      scrollTop: $(this).offset().top
    }, 2000);
  });
});

$(function () {
        $(".wadah__item").slice(0, 2).slideDown().css('display', 'flex');
        $(".LoadMore").on('click', function (e) {
            e.preventDefault();
          let sibs = $(this).siblings(".wadah__item:hidden");
            sibs.slice(0, 2).slideDown().css('display', 'flex');

            if (sibs.length == 0) {
                $(this).fadeOut('slow');
            }

            $('html,body').animate({
                scrollTop: $(this).offset().top
            }, 2000);
        });
    });