计数div在Jquery中的分页 [英] Counting divs for pagination in Jquery
问题描述
我想在Jquery中创建一个很好的分页。 EG:
I want to create a nice pagination in Jquery for a number of divs I have. EG:
<div class="container">
<div id="one">content</div>
<div id="two">content</div>
<div id="three">content</div>
<div id="four">content</div>
</div>
数字并不总是相同的,所以我需要计算div,并显示一个分页下面一个。
The number will not always be the same so I need to count the divs, and display a pagination like the one below.
1 | 2 | 3 | 4
点击页码将显示相关的div。我知道如何使用Jquery和css显示和隐藏元素,并且已经弄清楚我可以使用
Clicking on the page number would display the relevant div. I know how to show and hide elements using Jquery and css and have figured out I can count the divs using
var numPages = $('。容器')。size();
但我无法解决如何显示分页。
but I can't work out how I can display the pagination.
任何指针?
推荐答案
>
Something like this:
// Get all immediate child divs and their count
var $divs = $('div.container > div');
var pages = $divs.length;
// Hide every one but the first
$divs.not(':first').hide();
// Create a container for the pagination
$ul = $('<ul />');
// Create links for pagination inside the ul
for(var i = 0; i < pages; i++) {
$ul.append($('<li><a href="#" class="pagination" rel="'+i+'">'+i+'</a></li>'));
}
// Insert the pagination container
$('div.container').before($ul);
// Behaviour for clicking the links inside pagination container
$ul.find('a.pagination').click(function() {
// Get the index from current element's rel attribute
var index = parseInt($(this).attr('rel'), 10);
// Hide every div and show the div at the current index's location
$divs.hide().eq(index).show();
return false;
});
没有测试,但它应该给你启动器。基本上它只是创建一个ul元素来控制哪些div出现。
Haven't tested that but it should give you starters. Basically it just creates an ul element which controls which divs show up.
这篇关于计数div在Jquery中的分页的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!