javascript - 在 jquery 中定位多个列表

Question

我有三个具有相同类名的列表。在加载时，我只在每个列表中显示 5 个列表项，并且有“显示更多”按钮，单击时会显示其余列表项。

我想要的行为是，当为一个列表按下“显示更多”按钮时，它还会显示其他列表的隐藏列表项。

我的困境是 3 个列表的行为就像 1 个大列表并按顺序显示列表项，而不是一起显示所有列表的所有项。

知道如何让所有列表的行为一致吗？

$(document).ready(function(){

      var list = $(".list li");
      var numToShow = 5;
      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();
          }
      });

});

.list {
	padding: 0;
	margin: 0;
}

.list li {
	position: relative;
	margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<h1> LIst 1</h1>
	 <ul class="list">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
     <li>Item 5</li>
     <li>Item 6</li>
     <li>Item 7</li>
     <li>Item 8</li>
     <li>Item 9</li>
     <li>Item 10</li>
  </ul>
  <button class="next">Show More</button>
  <h1> LIst 2</h1>
	 <ul class="list">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
     <li>Item 5</li>
     <li>Item 6</li>
     <li>Item 7</li>
     <li>Item 8</li>
     <li>Item 9</li>
     <li>Item 10</li>
  </ul>
  <button class="next">Show More</button>
  <h1> LIst 3</h1>
	 <ul class="list">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
     <li>Item 5</li>
     <li>Item 6</li>
     <li>Item 7</li>
     <li>Item 8</li>
     <li>Item 9</li>
     <li>Item 10</li>
  </ul>
  <button class="next">Show More</button>
</div>

Answer 1

您必须分别对待列表，如下所示:

$(document).ready(function(){

  var $list = $(".list");
  var numToShow = 5;
  var $buttons = $(".next");
  $buttons.hide();

  $list.each(function() {
    var $listItems = $(this).find("li");
    var $button = $(this).next('.next');
    var numInList = $listItems.length;
    $listItems.hide();
    if (numInList > numToShow) {
      $button.show();
    }
    $listItems.slice(0, numToShow).show();
  })

  $buttons.click(function(){
    var $this = $(this);
    var $list = $this.prev(".list");
    var $listItems = $list.find("li");
    var showing = $listItems.filter(':visible').length;
    $listItems.slice(showing - 1, showing + numToShow).fadeIn();
    var nowShowing = $listItems.filter(':visible').length;
    var numInList = $listItems.length;
    if (nowShowing >= numInList) {
      $this.hide();
    }
  });

});

.list {
	padding: 0;
	margin: 0;
}

.list li {
	position: relative;
	margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <h1> LIst 1</h1>
	 <ul class="list">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
     <li>Item 5</li>
     <li>Item 6</li>
     <li>Item 7</li>
     <li>Item 8</li>
     <li>Item 9</li>
     <li>Item 10</li>
  </ul>
  <button class="next">Show More</button>
  <h1> LIst 2</h1>
	 <ul class="list">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
     <li>Item 5</li>
     <li>Item 6</li>
     <li>Item 7</li>
     <li>Item 8</li>
     <li>Item 9</li>
     <li>Item 10</li>
  </ul>
  <button class="next">Show More</button>
  <h1> LIst 3</h1>
	 <ul class="list">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
     <li>Item 5</li>
     <li>Item 6</li>
     <li>Item 7</li>
     <li>Item 8</li>
     <li>Item 9</li>
     <li>Item 10</li>
  </ul>
  <button class="next">Show More</button>
</div>