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>

我想在第三个list元素之后关闭col-md-4 div，并将第四个list元素包装在另一个div class =＆＃34; col-md-4＆＃34;＆gt;

中

这将创建两列。

这里有一些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");
}

Answer 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

Answer 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);

这将做你想要的事情

Answer 4

您不能在"</div><div>"等中使用.before()，因为该参数应该是一个或多个格式正确的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] );

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

4 个答案: