显示 div 的 3 到 5 jQuery

Question

我正在创建标签内容分页。我在这里需要的是我需要根据选择的分页项值显示和隐藏 div。我需要一次在内容中显示 3 个 div。用户可以使用分页功能对当前选项卡中的其他内容进行分页。

我尝试使用 slice 和 lt。当我前进时，它工作正常。但是我不知道如何在我反转的时候把它们取回来。

<div role="tabpanel" class="active" id="tab1">
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
</div>
<div class="tab" id="tab2"></div
<div class="tab" id="tab3"></div>

<ul class="pagination">
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
</ul>

$('.foo').filter(':lt(' + sItems + '),:gt(' + sTo + ')').fadeOut(300);

我将 sItems 和 sTo 作为变量值传递。

我需要的是显示介于 sItems 和 sTo 之间的 div'。可以是1到3、4到6等，根据选择的分页值。

Answer 1

最初他们都在展示。但是当您单击其中一个选项卡时，您将看到结果。

$( ".pagination li a" ).click(function() {
     index = $(this).parent().index();
     $( ".tab" ).hide();  
     $( ".tab" ).slice(index * 3, (index * 3) + 3).fadeIn();     
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab" id="tab2">1</div>
<div class="tab" id="tab2">2</div>
<div class="tab" id="tab3">3</div>
<div class="tab" id="tab3">4</div>
<div class="tab" id="tab3">5</div>
<div class="tab" id="tab3">6</div>
<div class="tab" id="tab3">7</div>
<div class="tab" id="tab3">8</div>
<div class="tab" id="tab3">9</div>


<ul class="pagination">
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>   
</ul>

Answer 2

这里有一个Working JsFiddle，代码如下

$(function() {
  $('div.foo').hide(); //initially hide all the div's on page load.


  $.each($('div.tab'), function() {
    var $currTab = $(this);

    //create Li tags dynamically
    var totalListToBuild = ($currTab.find('div.foo').length) / 3;
    for (var i = 0; i < totalListToBuild; i++) {
      $currTab.find('ul.pagination').append('<li><a href="#">' + (i + 1) + '</a></li>');
    }

    $currTab.find('.pagination li a').on('click', function(e) { // bind events
      e.preventDefault();
      var currIndex = $(this).text();
      $currTab.find('div.foo').hide();
      var start = (currIndex * 3) - 3;
      var end = (currIndex * 3);

      $currTab.find(".foo").slice(start, end).show();
    });

    $currTab.find('.pagination li a:eq(0)').trigger('click'); //trigger first page click
  });



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="tabpanel" class="tab active" id="tab1">
  <div class="foo">Contents going here 1</div>
  <div class="foo">Contents going here 2</div>
  <div class="foo">Contents going here 3</div>
  <div class="foo">Contents going here 4</div>
  <div class="foo">Contents going here 5</div>
  <div class="foo">Contents going here 6</div>
  <div class="foo">Contents going here 7</div>
  <div class="foo">Contents going here 8</div>
  <div class="foo">Contents going here 9</div>
  <div class="foo">Contents going here 10</div>
  <div class="foo">Contents going here 11</div>
  <div class="foo">Contents going here 12</div>
  <div class="foo">Contents going here 13</div>
  <div class="foo">Contents going here 14</div>
  <div class="foo">Contents going here 15</div>
  <div class="foo">Contents going here 16</div>
  <div class="foo">Contents going here 17</div>
  <div class="foo">Contents going here 18</div>
  <div class="foo">Contents going here 19</div>
  <div class="foo">Contents going here 20</div>
  <div class="foo">Contents going here 21</div>

  <ul class="pagination">

  </ul>
</div>
<div class="tab" id="tab2">
  <div class="foo">Contents going here 1</div>
  <div class="foo">Contents going here 2</div>
  <div class="foo">Contents going here 3</div>
  <div class="foo">Contents going here 4</div>
  <div class="foo">Contents going here 5</div>
  <div class="foo">Contents going here 6</div>
  <div class="foo">Contents going here 7</div>
  <div class="foo">Contents going here 8</div>
  <div class="foo">Contents going here 9</div>
  <div class="foo">Contents going here 10</div>
  <div class="foo">Contents going here 11</div>
  <div class="foo">Contents going here 12</div>
  <div class="foo">Contents going here 13</div>
  <div class="foo">Contents going here 14</div>
  <div class="foo">Contents going here 15</div>
  <div class="foo">Contents going here 16</div>
  <div class="foo">Contents going here 17</div>
  <div class="foo">Contents going here 18</div>
  <div class="foo">Contents going here 19</div>
  <div class="foo">Contents going here 20</div>
  <div class="foo">Contents going here 21</div>

  <ul class="pagination">

  </ul>
</div>
<div class="tab" id="tab3">
  <div class="foo">Contents going here 1</div>
  <div class="foo">Contents going here 2</div>
  <div class="foo">Contents going here 3</div>
  <div class="foo">Contents going here 4</div>
  <div class="foo">Contents going here 5</div>
  <div class="foo">Contents going here 6</div>
  <div class="foo">Contents going here 7</div>
  <div class="foo">Contents going here 8</div>
  <div class="foo">Contents going here 9</div>
  <div class="foo">Contents going here 10</div>
  <div class="foo">Contents going here 11</div>
  <div class="foo">Contents going here 12</div>
  <div class="foo">Contents going here 13</div>
  <div class="foo">Contents going here 14</div>
  <div class="foo">Contents going here 15</div>
  <div class="foo">Contents going here 16</div>
  <div class="foo">Contents going here 17</div>
  <div class="foo">Contents going here 18</div>
  <div class="foo">Contents going here 19</div>
  <div class="foo">Contents going here 20</div>
  <div class="foo">Contents going here 21</div>

  <ul class="pagination">

  </ul>
</div>

显示 div 的 3 到 5 jQuery

show divs' 3 to 5 jQuery

jquery

pagination

slice

jquery-pagination