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

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

//this is dynamic loaded content 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
10
 
11
 
12
 
13
 
14
 ..... etc (200 divs more) 
 
next 

这是我的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 .= ' '.$x.' '; $x++; } if($counter > 12){ echo'
 Prev '.$Pnumbers.' Next 
'; } 

使用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  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应该在那里有“隐藏”类

Answer 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; } 

  
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
10
 
11
 
12
 
13
 
14
 
 
next
 
prev 

Answer 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

Answer 3

试试这个

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

还要确保将css规则定义为

 .hidden { display: none; }