Question

我有一组li，就像跟随

一样

        <ul class="clear_group>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>

    </ul>

我想动态地将ul添加到li的第四个数字中，并希望在/ul的第7个数字之后关闭li

然后，它显示如下

        <ul class="clear_group>
        <li></li>
        <li></li>
        <li></li>
        <li></li>

        </ul>
        <ul>
        <li></li>
        <li></li>
        <li></li>
        </ul>
        <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>

    </ul>

这是我的Jquery，

        $( '.myclass ul li:nth-child(4)' ).after('</ul><ul class="clear_social">');
    $( '.myclass ul li:nth-child(7)' ).after('<ul>');

但<ul>会在第4个li之后自动关闭，例如<ul class="clear_social"></ul>

有人可以帮忙吗？

Answer 1

DOM操作不像字符串连接那样工作，而是需要创建新的ul元素，将li移动到它们之类

var $ul = $('.clear_group'), $lis = $ul.children().slice(4), $next = $ul;
for(var i=0;i<$lis.length;i+=4){
    $next = $('<ul />').append($lis.slice(i, i+4)).insertAfter($ul)
}

演示：Fiddle

如何在特定数量的li之后动态插入ul？

1 个答案: