Javascript 隐藏/显示独立div的li元素

尝试在搜索页面上实现隐藏/显示结果时，我现在拥有的功能正常，但不是我想要的方式到目前为止，代码限制了所有li，而不是每个div限制3个

let searchResults       = document.querySelectorAll('div.test-class-3');
searchResults.forEach(function (searchResult) {
  console.log('result',searchResult)
  $(document).ready(function(){

    var list = $(".search-results li");
    var numToShow = 3;
    var button = $("#next");
    var numInList = list.length;
    list.hide();
    if (numInList > numToShow) {
      button.show();
    }
    list.slice(0, numToShow).show();

    button.click(function(){
        var showing = list.filter(':visible').length;
        list.slice(showing - 1, showing + numToShow).fadeIn();
        var nowShowing = list.filter(':visible').length;
        if (nowShowing >= numInList) {
          button.hide();
        }
    });

  });

})

My console.log返回两个div，它们是唯一的，所以基本上forEach（searchResult）我只想显示3个li，每个div都应该有show more按钮到目前为止，代码限制了所有li，而不是每个div限制3个

let searchResults       = document.querySelectorAll('div.test-class-3');
searchResults.forEach(function (searchResult) {
  console.log('result',searchResult)
  $(document).ready(function(){

    var list = $(".search-results li");
    var numToShow = 3;
    var button = $("#next");
    var numInList = list.length;
    list.hide();
    if (numInList > numToShow) {
      button.show();
    }
    list.slice(0, numToShow).show();

    button.click(function(){
        var showing = list.filter(':visible').length;
        list.slice(showing - 1, showing + numToShow).fadeIn();
        var nowShowing = list.filter(':visible').length;
        if (nowShowing >= numInList) {
          button.hide();
        }
    });

  });

})

编辑：

我已经想出了一个解决方案，虽然它一点也不干燥。我如何重构它

    $(document).ready(function(){

  var list = $(".search-results .reports");
  var numToShow = 3;
  var button = $(".next:eq(0)");
  var numInList = list.length;
  list.hide();
  if (numInList > numToShow) {
    button.show();
  }
  list.slice(0, numToShow).show();

  button.click(function(){
      var showing = list.filter(':visible').length;
      list.slice(showing - 1, showing + numToShow).fadeIn();
      var nowShowing = list.filter(':visible').length;
      if (nowShowing >= numInList) {
        button.hide();
      }
  });

});


$(document).ready(function(){

  var dashboardList = $(".search-results .dashboards");
  var dashboardNumToShow = 3;
  var dashboardButton = $(".next:eq(1)");
  var dashboardNumInList = dashboardList.length;
  dashboardList.hide();
  if (dashboardNumInList > dashboardNumToShow) {
    dashboardButton.show();
  }
  dashboardList.slice(0, dashboardNumToShow).show();

  dashboardButton.click(function(){
    console.log('event fired')
    console.log('arrayLength', dashboardNumInList)
      var dashboardShowing = dashboardList.filter(':visible').length;
      dashboardList.slice(dashboardShowing - 1, dashboardShowing + dashboardNumToShow).fadeIn();
      var dashboardNowShowing = dashboardList.filter(':visible').length;
      console.log('nowShowing', dashboardNowShowing)

      if (dashboardNowShowing >= dashboardNumInList) {
        dashboardButton.hide();
      }
  });

});

---

问题在于线路：

var list = $(".search-results li");

这不限于每个搜索结果

您需要做的是将该行限制在搜索结果中：

var list = $(".search-results li", searchResult);

---

请注意，您可能也没有用

#next

选择正确的按钮。

您仍然没有限制在jQuery上下文中（请参阅）