Jquery隐藏前12个元素,显示接下来的12个元素 [英] Jquery hide first 12 elementes, show next 12 elements
问题描述
我想要做的是隐藏前12个元素并显示接下来的12个元素。
what i am trying to do is make the first 12 elements hidden and show the next 12 elements.
//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:
This is my 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个新元素并隐藏前一个元素。
It works one time, after it stops working. (and it skips number 13) i want to have 12 new elements visible with each Next click and hide the previous.
UPDATE - 这是我的最终结果完美无缺
JSFIDDLE DEMO
感谢Alex Char
Thanks to Alex Char
用于创建页码的 PHP ,您也可以使用javascript执行此操作
PHP for creating page numbers, you could do this also with 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不包含hidden类,所有div都是之后应该在那里有隐藏类
Make sure that the first 12 divs do not contain the "hidden" class, all the divs that come after should have "hidden" in there class
推荐答案
我改变了一点实现支持和以前的。我使用css类来隐藏内容。
I change a bit the implementation to support and previous. I use a css class to hide content.
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步进行演示,但你可以使用你想要的):
I create a general solution after your comment with next and previous(I use step 3 for demo purposes but you can use what ever you want):
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>
参考文献
这篇关于Jquery隐藏前12个元素,显示接下来的12个元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!