使用JQuery对HTML内容进行分页 [英] Pagination of HTML content using JQuery

问题描述

我是jQuery的新手.在下面的代码中，我试图对每个子标题进行分页，如果我单击子标题1，则该页面应仅显示子标题1的内容.创建并获取索引.

I am new to jQuery. In the below code, I am trying to do a pagination for each sub header, If i click sub header 1, the page should show only the content of sub header 1. I have already tried and got the number of pages that has to be created and got the index.

如何创建分页?像下面的情况一样，我希望显示"1,2,3"，因为有三个子标题.在单击1时，我应仅显示子标题1，而其他标题则应隐藏.如何使用jQuery完成?

How can i create pagination ? Like in the below case, i want "1,2,3" to be displayed because there are three sub headers. And on clicking 1, i should show only sub header 1 and the others should be hidden. How can it be done using jQuery?

<span>Click a Header!</span>
<div><h2>Sub Header 1</h2></div><div>Content 1</div>
<div><h2>Sub Header 2</h2></div><div>Content 2</div>
<div><h2>Sub Header 3</h2></div><div>Content 3</div>

$("h2").click(function () {
    // this is the dom element clicked
    var index = $("h2").index(this);
    var size = $("h2").size(this);
    $("span").text("That was Header index #" + index + "   Total Pages #" + size);
});

http://jsfiddle.net/userdude/GtDHW/

推荐答案

这是您要实现的目标吗?

Is this what you are trying to achieve?

$("h2").click(function () {
    $("h2").not(this).parent().next().hide();
    $(this).parent().next().show();
});

说明:

• 获取所有H2，除了单击的以外，转到父级(包含H2的DIV)，获取下一个元素(包含内容的DIV)，隐藏所有包含的DIV内容
• 以点击的H2进行遍历，确保显示包含内容的DIV

• Take all the H2s, except the clicked one, go to parent (DIV containing the H2s), get next element (DIV with content), hide all the DIVs containing content
• Take the clicked H2, traverse in the similar manner, make sure the DIV with content is shown

这篇关于使用JQuery对HTML内容进行分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！