动态地将分页链接插入DOM?

时间:2014-08-12 02:01:54

标签: javascript jquery dom pagination

我目前正致力于使用div和链接创建简单的动态内联分页。我已经被困在这段代码上几个小时了,试图找出如何创建分页链接,具体取决于当前有多少.thumbnailPage div。

我希望能够在.newsflash div下方插入一个div,其中包含显示.thumbnailPage div的链接。

JavaScript的:

/*----- Wraps .bite divs in separate, numbered .thumbnailPage divs -----*/
var addnumber = 0;
$('#newsflash .bite').each(function(i) {
    if( i % 6 == 0 ) {
        $(this).nextAll()
               .andSelf()
               .slice(0,6)
               .wrapAll('<div id="thumbnailPage'+ (++addnumber) +'content"></div>');
    }
});

/*----- Hides .thumbnailPage divs -----*/
$('#newsflash').children().hide();

/*----- Hopefully a code to insert pagination links here, depending on number of .thumbnailPages -----*/

/*----- Function for .thumbnailPage links -----*/
$('#pagewrapper a').click(function () {

    var chosen1 = this.id;
    var divIdToShow = chosen1 + 'content';

    $('#newsflash').children('div').each(function (i) {
        var currentDiv = $(this);
        if (this.id == divIdToShow) {
            if (currentDiv.not(':visible')) {
                currentDiv.show();
            }
        } else {
            currentDiv.hide();
        }
    });
});

HTML

<div class="newsflash" id="newsflash">
    <div id="thumbnailPage1content">...</div>
    <div id="thumbnailPage2content">...</div>
    <div id="thumbnailPage3content">...</div>

    <!--- Hopefully insert this pagewrapper div here depending on how many thumbnailPages --->
    <div id="pagewrapper">
        <a id="thumbnailPage1">1</a>
        <a id="thumbnailPage2">2</a>
        <a id="thumbnailPage3">3</a>
    </div>
</div>

0 个答案:

没有答案