关闭一个 div 并开始一个新的答案

【问题标题】：Close a div and start a new one关闭一个 div 并开始一个新的
【发布时间】：2015-10-19 04:30:37
【问题描述】：

我有一个我想要在多个列中的项目列表。这些列可以基于一系列因素是任意的，因此还有一些其他的事情正在发生。不幸的是，我被如何关闭包含的 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>

我哪里错了？

【问题讨论】：

<li> 不是直接在 div 中的有效内容。
我认为您必须在第一个 div 之后添加另一个 div，并将元素移动到新 div 内。
是的，他是对的。
需要在

【解决方案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");
}

【讨论】：

【解决方案2】：

你可以试试这个：

$(function(){

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

    $(".JS-columnGrid > li").each(function(){
        cutoffArray.push(this);
    });

    $('.JS-columnGrid').after($col);
    $(cutoffArray[3]).appendTo($col);

});

Working fiddle

更新答案：

如果你想添加更多的 li 将上面的更改为：

var $col = $('<div class="col-md-3"></div>');

$('.JS-columnGrid').after($col);
$(".JS-columnGrid > li").each(function(index){
    if(index > 2) {
         $col.append($(this));   
    }
});

updated fiddle

【讨论】：

在 4 之后添加另一个 li 项会发生什么。它在第一列中。

【解决方案3】：

尽管<li> 元素位于“错误”的位置，但浏览器不会忽略它们，您仍然可以操纵它们

var div = document.querySelector('.col-md-4.JS-columnGrid');
var lis = div.querySelectorAll('li');
var newDiv = document.createElement('div');
newDiv.className = 'col-md-3';
for (var i = 3; i < lis.length; i++) {
    newDiv.appendChild(lis[i]);
}
div.parentElement.insertBefore(newDiv, div.nextElementSibling);

这会做你想做的事

【讨论】：

【解决方案4】：

您不能在.before() 等中使用"</div><div>"，因为参数应该是一个或多个格式正确的HTML 元素（或纯文本）。您在这里处理的是 DOM，而不是纯文本，并且参数的文本 HTML 表示纯粹是为了方便。

您可以改为简单地移动元素：

    var els = $('.JS-columnGrid > li');
    var x = $( "<div class='col-md-4 JS-columnGrid'></div>" );
    els.parent().after( x );

    for (var i = 0; i < els.length; i ++ )
      if ( i >= 3 )
        x.append( els[i] );

【讨论】：