javascript - 关闭一个 div 并开始一个新的

Question

我有一个项目列表，我想将它们放在多个列中。根据一系列因素，这些列可以是任意的，因此还有其他一些事情在发生。不幸的是，我在如何关闭包含的 div 上被骗了。

假设我有这样的结构:

<div class="col-md-4 JS-columnGrid">
    <li>one</li>
    <li>two</li>
    <li>three</li>
<!--</div>-->
<!--<div class="col-md-4">-->
    <li>four</li>    
</div>

我想在第三个列表元素之后关闭 col-md-4 div，并将第四个列表元素包装在另一个 div class="col-md-4">

这将创建两列。

这里有一些 javascript 可以抓取每个列表，将其放入一个数组中，然后我的意图是我可以使用该数组来决定我要在何处剪切该列。

   var cutoffArray = [];
    $(".JS-columnGrid > li").each(function(){
        cutoffArray.push(this);
        console.log(cutoffArray);
    });

    $(cutoffArray[3]).before("</div><div class='col-md-3'>");

不幸的是，这是之后的输出 HTML:

<div class="col-md-4 JS-columnGrid">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <div class="col-md-3"></div>
    <li>four</li>    
</div>

我哪里错了？

Answer 1

// select and remove all the elements you want to re-package
var $lis = $(".col-md-4.JS-columnGrid li").remove(), 
    i,
    divs = [];

$(".outer-container").empty();

// slice into packs of three and append each pack to container
for (i = 0; i < $lis.length; i += 3) {
    $("<div class='col-md-3'></div>")
        .append( $lis.slice(i, i + 3) )
        .appendTo(".outer-container");
}