javascript - jQuery，当 anchor 的数量超过 10 时创建下一个 div

Question

脚本:

<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>

---

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

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

Answer 1

简单地遍历每个 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 属性的 anchor -如果不是，则意味着我们要么到达了 anchor 的末端，要么到达了不是 anchor 的地方。

这是一个 JSFiddle example正在使用中。