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

Question

[尝试在搜索页面上实现隐藏/显示结果，我现在拥有的东西可以正常工作，但不是我想要的方式。 到目前为止，代码限制所有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();
        }
    });

  });

})

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

编辑：

我想出了一个解决方案，尽管它根本不是干的。我该如何重构它？

    $(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();
      }
  });

});
[尝试在搜索页面上实现隐藏/显示结果，我现在拥有的东西可以正常工作，但不是我想要的方式。到目前为止，该代码限制了所有li的限制，而不是每个div限制3个，让searchResults ...

Answer 1

问题出在行中：

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