jQuery隐藏前12个元素，显示接下来的12个元素

Posted 2023-02-25

【中文标题】jQuery隐藏前12个元素，显示接下来的12个元素

【英文标题】：Jquery hide first 12 elementes, show next 12 elements

【发布时间】：2016-03-29 16:10:23

【问题描述】：

我想要做的是隐藏前 12 个元素并显示接下来的 12 个元素。

//this is dynamic loaded content
<div class="inner-content">
     <div class="front-pro">1</div>
     <div class="front-pro">2</div>
     <div class="front-pro">3</div>
     <div class="front-pro">4</div>
     <div class="front-pro">5</div>
     <div class="front-pro">6</div>
     <div class="front-pro">7</div>
     <div class="front-pro">8</div>
     <div class="front-pro">9</div>
     <div class="front-pro">10</div>
     <div class="front-pro">11</div>
     <div class="front-pro">12</div>
     <div class="front-pro hidden">13</div>
     <div class="front-pro hidden">14</div>
     ..... etc (200 divs more)
</div>
<div onclick="SearchNext();">next</div>

这是我的 javascript/jquery：

function SearchNext()
 var first = $('.inner-content').children('.front-pro:hidden:first');
    first.prevAll(':lt(12)').hide();
    first.nextAll(':lt(12)').show();

它会在它停止工作后工作一次。 （它跳过了 13 号） 我希望每次单击下一个都可以看到 12 个新元素并隐藏上一个。

更新 - 这是我完美运行的最终结果 JSFIDDLE DEMO

感谢 Alex Char

PHP 用于创建页码，您也可以使用 javascript 来完成此操作

//$counter is search results
    $x = 1; 
    $Pnumbers = '';
    while($x <= ceil($counter/12)) 
        if($x == 1) $ecl = 'bold';  else $ecl = ''; 
       $Pnumbers .= ' <span class="number '.$ecl.' numbering" onClick="GoTo('.$x.');">'.$x.'</span> ';
        $x++;
     

    if($counter > 12) echo'<div class="page-numbers">
    <span class="prev number" onclick="GoTo(\'prev\')">Prev</span>
    '.$Pnumbers.'
    <span class="next number" onclick="GoTo(\'next\');">Next</span>
    </div>'; 

Javascript：

function GoTo(nn) 
      var nng = parseInt($('.page-numbers .numbering.bold').text());
     if(nn == 'next')
        nn = nng+1; 
     if(nn == 'prev')
         nn = nng-1; 
      
    //get all child elements with class front-pro 
    //of element with class .inner-content
    var childElems = $(".inner-content .front-pro");
    var totalpages = Math.ceil(childElems.length/12);
    //iterate through the elements
    var first = (nn-1)*12;
    var last = first+11;
    childElems.each(function(i, el) 

      //show the elements that match the criteria removing css class
      if (i >= first && i <= last) 
        $(el).removeClass('hidden');
       else 
        //hide rest
        $(el).addClass('hidden');
      
    );

    if(nn > 1) $('.page-numbers .prev').show(); else $('.page-numbers .prev').hide(); 
    if(nn < totalpages) $('.page-numbers .next').show(); else $('.page-numbers .next').hide(); 
    $('.page-numbers .numbering').removeClass('bold');
    $('.page-numbers .numbering:eq('+(nn-1)+')').addClass('bold');
  

CSS：

.front-pro.hidden display:none !important; 
.prev   display: none; 
.page-numbers .number
background: #ff0000;  
.page-numbers text-align:center; 
.page-numbers .number.bold font-weight:bold; background:#000; 
.page-numbers .number:hover background:#000; cursor: pointer; 

确保前 12 个 div 不包含“隐藏”类，后面的所有 div 都应该在该类中“隐藏”

【问题讨论】：

很高兴我帮助了你。看起来还不错。一个建议。与其只使用一个函数（GoTo），不如考虑使用更小的函数，或者您可以像我在示例中所做的那样使用显示模块模式。

【参考方案1】：

我将实现更改为支持和以前的版本。我使用 css 类来隐藏内容。

function searchNext() 
  $('.inner-content').children('.front-pro:lt(12)').addClass('hidden');
  $('.inner-content').children('.front-pro:gt(11)').removeClass('hidden');
  $(".next").hide();
  $(".prev").show();


function searchPrev() 
  $('.inner-content').children('.front-pro:lt(12)').removeClass('hidden');
  $('.inner-content').children('.front-pro:gt(11)').addClass('hidden');
  $(".next").show();
  $(".prev").hide();

.front-pro.hidden 
  display: none;

.prev 
  display: none;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner-content">
  <div class="front-pro">1</div>
  <div class="front-pro">2</div>
  <div class="front-pro">3</div>
  <div class="front-pro">4</div>
  <div class="front-pro">5</div>
  <div class="front-pro">6</div>
  <div class="front-pro">7</div>
  <div class="front-pro">8</div>
  <div class="front-pro">9</div>
  <div class="front-pro">10</div>
  <div class="front-pro">11</div>
  <div class="front-pro">12</div>
  <div class="front-pro hidden">13</div>
  <div class="front-pro hidden">14</div>
</div>
<div class="next" onclick="searchNext();">next</div>
<div class="prev" onclick="searchPrev();">prev</div>

在您对下一个和上一个发表评论后，我创建了一个通用解决方案（我将第 3 步用于演示目的，但您可以使用任何您想要的）：

var pager = (function() 
  /*declare private variables*/
  var first = 0,
    last = 2,
    step = 3;

  function searchNext() 
    //next function
    //increasing first and last variables
    first += step;
    last += step;
    pagerHelper();
  

  function searchPrev() 
    //previous function
    //decrease first and last variables
    first -= step;
    last -= step;
    pagerHelper();
  

  function pagerHelper() 
    //get all child elements with class front-pro 
    //of element with class .inner-content
    var childElems = $(".inner-content .front-pro");
    //iterate through the elements
    childElems.each(function(i, el) 
      //show the elements that match the criteria removing css class
      if (i >= first && i <= last) 
        $(el).removeClass('hidden');
       else 
        //hide rest
        $(el).addClass('hidden');
      
    );
    nextPreviousToggle(childElems.length);
  

  function nextPreviousToggle(maxEle) 
    //here the code is to show/hide next/previous buttons
    if (last >= maxEle) 
      $(".next").hide();
     else 
      $(".next").show();
    
    if (first === 0) 
      $(".prev").hide();
     else 
      $(".prev").show();
    
  
  return 
    searchNext: searchNext,
    searchPrev: searchPrev
  
)();

.front-pro.hidden 
  display: none;

.prev 
  display: none;

.prev:hover,
.next:hover 
  text-decoration: underline;
  cursor: pointer;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner-content">
  <div class="front-pro">1</div>
  <div class="front-pro">2</div>
  <div class="front-pro">3</div>
  <div class="front-pro hidden">4</div>
  <div class="front-pro hidden">5</div>
  <div class="front-pro hidden">6</div>
  <div class="front-pro hidden">7</div>
  <div class="front-pro hidden">8</div>
  <div class="front-pro hidden">9</div>
  <div class="front-pro hidden">10</div>
  <div class="front-pro hidden">11</div>
  <div class="front-pro hidden">12</div>
  <div class="front-pro hidden">13</div>
  <div class="front-pro hidden">14</div>
</div>
<span class="next" onclick="pager.searchNext();">next</span>
<span class="prev" onclick="pager.searchPrev();">prev</span>

参考文献

:gt()

:lt()

【讨论】：

这行得通，但我得到了 200 多个前端 div，我想每次点击都转到下 12 个，现在它显示了所有内容

我使用你的 javascript 更新了我的帖子 - jsfiddle

【参考方案2】：

您使用以下代码来处理任意数量的 div，

var x = $(".inner-content div").hide();

$("div:contains(next)").click(function() 
  var cnt = $(this).data("cnt") || 0;
  if((cnt * 12) > x.length) cnt = 0; 
  x.hide().filter(":eq("+ (cnt * 12)  + "), :lt(" + ((cnt * 12) + 12) + "):gt(" + (cnt * 12) + ")").show();
  $(this).data("cnt", ++cnt);
);

DEMO

【讨论】：

这是最好的方法，非常感谢！你也知道怎么做上一个按钮吗？

@Vazzilly 是的，但要问一个新问题。这样它就会引起这里其他专家的注意。这也将有助于未来的游客。让这篇文章不受污染。 :)

New post

@Vazzilly 12:15 am 在印度。大脑已经睡着了。尝试从别人那里得到解决方案。如果不是，我会同时给你一个 tomo 的解决方案。 :)

【参考方案3】：

试试这个

$('.inner-content').children().each(function (i, x) 
    if (i < 12) // Hide First 12 i.e 0-11
        $(x).addClass('hidden');
    else if (i < 24) // Show Next 12 i.e 12-23
        $(x).removeClass('hidden');
)

还要确保您已将 css 规则定义为

.hidden 
    display: none;

【讨论】：

这隐藏了一切