1

脚本：

<script>
    var currentPage = 1;

    function page(pg)
    {
        var els = document.getElementsByClassName("pagecontainer");
        for (var i = 0; i < els.length; i++)
        {
            var page_of_container = els[i].getAttribute("id");
            els[i].style.display = page_of_container  == pg ? 'block' : 'none';                    
        }

        currentPage = pg;
    }

    function prev()
    {
        if (currentPage <= 1) return;

        page(currentPage -1);
    }

    function next()
    {
        if (currentPage >= document.getElementsByClassName("pagecontainer").length) return;

        page(currentPage + 1);
    }
</script>

HTML：我将只拥有这个 HTML，

<div id="1" class="pagecontainer" style="display: block;">
<a href="#">Contents goes here</a>
<a href="#">Contents goes here</a>
<a href="#">Contents goes here</a>
-
-
-
- 10 a elements
<p class="page"></p>
</div>

<div class="bottom">
    <a href="#" onclick="prev()">&lsaquo;</a>
    <a href="#" onclick="page('1')"></a>
    <a href="#" onclick="page('2')"></a>
    <a href="#" onclick="next()">&rsaquo;</a>
</div>

我需要从脚本中创建：

<div id="2" class="pagecontainer" style="display: block;">
    <a href="#">Contents goes here</a>
    <a href="#">Contents goes here</a>
    <p class="page"></p>
    </div>

我将它用于有用的链接块，因此所有内容都将成为 LINKS，并且脚本通过创建 div id=1、id=2、id=3 可以很好地处理静态内容，我需要让它动态化例如，通过使用一个 div 并让脚本在锚点数量超过 10 时创建下一个 div，

我怎样才能做到这一点，在此先感谢！

4

1 回答 1

2

只需循环遍历每个anchor并将其添加到数组中，然后当循环计数达到 10 时创建新的除法器并相应地分配。

var container = [];

$('a[href]').each(function() {
    container.push($(this));

    var containerLength = container.length;

    if(containerLength  === 10 || !$(this).next().is('a[href]'))
    {
        var containingDivider = $('<div></div>');
        containingDivider.insertBefore(container[0]);

        for(i=0;i<containerLength;i++)
            container.shift().appendTo(containingDivider);

        container.length = 0;
    }
});

确保下!$(this).next().is('a[href]')一个元素是具有href属性的锚点 - 如果不是，则意味着我们已经到达锚点的末端或到达不是锚点的东西。

这是一个使用中的JSFiddle 示例。

于 2013-03-16T18:12:25.457 回答