Jquery скрыть первые 12 элементов, показать следующие 12 элементов

то, что я пытаюсь сделать, это сделать первые 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:

• PHP Json echo specific item
• Значение сеанса только после перезагрузки страницы
• Как изменить варианты выпадающего списка, основанные на другом выпадающем списке? Значения, полученные из базы данных
• Обнаруживать, если какой-либо IE (MSIE)
• Функция getScript работает, но не получает часть css

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

Он работает один раз, после того как он перестает работать. (и он пропускает номер 13), я хочу иметь 12 новых элементов, видимых с каждым следующим кликом и скрыть предыдущее.

UPDATE – это мой конечный результат, который отлично работает 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 divs не содержат «скрытый» класс, все divs, которые приходят после, должны иметь «скрытый» там класс

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

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

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

 .hidden { display: none; }