Javascript Jquery将引导列动态换行

我有一些代码的格式如下：

<div id="section">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
</div>

本节中可以有任意数量的列（偶数或奇数）

我想要的是将其重新格式化如下：

<div id="section">
    <div class="row">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
    </div>
    <div class="row">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
    </div>
    <div class="row">
        <div class="col-xs-6"></div>
        <div class="col-xs-6"></div>
    </div>
    <div class="row">
        <div class="col-xs-6"></div>
    </div>
</div>

以下是我的尝试：

for (var x = 0; x < $('#section').children().length; x+=2) {
    var firstSection = $('#section').children().eq(x);
    if ($('#section').children().length >= x + 1) {
        var secondSection = $('#section').children().eq(x + 1);
        var finalSection = '<div class="row">' + firstSection.parent().html() + secondSection.parent().html() + '</div>';
        secondSection.remove();
    }
    else {
        var finalSection = '<div class="row">' + firstSection.html() + '</div>';
    }

    firstSection.remove();
    $('#section').append(finalSection);
}

for（var x=0；x<$（'#section'）.children（）.length；x+=2）{
var firstSection=$（'#section'）.children（）.eq（x）；
if（$（'#section'）.children（）.length>=x+1）{
var secondSection=$（'#section'）.children（）.eq（x+1）；
var finalSection=''+firstSection.parent（）.html（）+secondSection.parent（）.html（）+''；
第二节。删除（）；
}
否则{
var finalSection=''+firstSection.html（）+''；
}
firstSection.remove（）；
$（“#节”）。追加（最后一节）；
}

---

如果有人想要一些额外的乐趣，您可以尝试允许它处理可变列宽以及！（虽然我的项目不需要这样做）。

她的例子循环了各个列，与您现在尝试的类似

它使用

find（）

、

append（）

和

clone（）

来完成此任务。作为一个附加功能，我将其包装到一个函数中，该函数接受行大小作为参数

//将节拆分为大小为“rowSize”的行，默认情况下为2。
函数breakitup（行大小=2）{
var$section=$（“#section”）；//获取节
var$row=$（“”）；//为行创建模板
var cols=$section.find（“div”）；//获取列
var working；//当前行的tmp变量
对于（变量i=0；i
.row{
边框：1px纯红；
}

测试
测试2
测试3
测试4
测试5
测试6
测试7
您可以使用，和选择器：


$（'#section>div:偶数'）。每个（函数（idx，ele）{
$（ele）.add（$（this.next（））.wrapAll（$（''，{class:'row'}））；
});
log（$（'#section'）.html（））

1.
2.
3.
4.
5.
6.
7.
是否每
行最多2个，确定该值的理由是什么。如果超过每行2个，则该列将溢出到新行。