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>

我正在使用它来获取有用的链接块所以所有内容都是LINKS，并且脚本通过创建divs id = 1，id = 2，id = 3来处理静态内容，我需要的是通过使用一个div使其动态化，让脚本在锚点数超过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属性的锚点 - 如果不是这意味着我们已经到达了锚点的末尾或者达到了不是一个锚。

这是使用中的JSFiddle example。

jQuery，当锚点的数量超过10时创建下一个div

1 个答案: