Javascript 用子元素包装一组元素

我正在尝试使用jQuery将购物车应用程序的输出放入引导布局中。我的html输出如下所示

<div id="CWlistings" class="CWcontent">
<h1 class="CWcategoryName">
<div class="CWlistingBox col-md-4 col-sm-6" style="">
<div class="CWlistingBox col-md-4 col-sm-6" style="">
<div class="CWlistingBox col-md-4 col-sm-6" style="">
<div class="CWlistingBox col-md-4 col-sm-6" style="">
<div class="CWlistingBox col-md-4 col-sm-6" style="">
<div class="CWlistingBox col-md-4 col-sm-6" style="">
<div class="CWlistingBox col-md-4 col-sm-6" style="">
<div class="CWlistingBox col-md-4 col-sm-6" style="">
<div class="CWlistingBox col-md-4 col-sm-6" style="">
<div class="CWlistingBox col-md-4 col-sm-6" style="">
<div class="CWlistingBox col-md-4 col-sm-6" style="">
<div class="CWlistingBox col-md-4 col-sm-6" style="">
</div>
<div class="CWclear"></div>

（来自firebug，每个div都有一个子div和它自己的子div。）我需要包装2或3

"<div class="CWlistingBox col-md-4 col-sm-6" style="">" 's 

“”s

在div class=“row”中，取决于屏幕宽度。我尝试了.wrap（）和.wrapAll（）的各种方法，但我得到的都是错误。 非常感谢。

您可以使用jQuery方法和一个简单的

for

循环：

var $e = $('.CWlistingBox');
for ( var i = 0; i < $e.length; i+=2 ) {
   $e.slice(i, i+2).wrapAll('<div class="row"/>');
}

var$e=$（'.CWlistingBox'）；
对于（变量i=0；i<$e.length；i+=2）{
$e.slice（i，i+2）.wrapAll（“”）；
}

我不知道你说的2-3 div是什么意思，你需要包装。。 您可以为此使用$.wrap（）

Jsfiddle：

$（'.col-md-4'）。换行（“”）；

您可以使用：

while ($('#CWlistings > div.CWlistingBox').length) {
    $('#CWlistings > div.CWlistingBox:lt(3)').wrapAll('<div class="row" />');
}

---

不是所有的div都缺少结束标记吗？不，它们在代码中我只是从firebug中复制了出来，没有打开它们。他的意思是他需要把div分成两到三组。我做了一个，您的代码重新查询DOM，但它并不比缓存慢。j08691和undefined的答案都非常好，在测试页面上工作得非常好。不幸的是，我似乎与其他代码有一些冲突，所以我仍然在踢自己，但感谢您的回答。MikeI起初并没有意识到，但是一些div显然包含脚本标记。wrap在执行脚本时存在问题。在我的例子中，它们被用来将html元素写入页面，这样我就可以在像这样使用上面的代码之前简单地删除它们

while ($('#CWlistings > div.CWlistingBox').length) {
    $('#CWlistings > div.CWlistingBox:lt(3)').wrapAll('<div class="row" />');
}

<div id="CWlistings" class="CWcontent">
     <h1 class="CWcategoryName"></h1>
    <div class="row">
        <div class="CWlistingBox col-md-4 col-sm-6" style=""></div>
        <div class="CWlistingBox col-md-4 col-sm-6" style=""></div>
        <div class="CWlistingBox col-md-4 col-sm-6" style=""></div>
    </div>
    <div class="row">
        <div class="CWlistingBox col-md-4 col-sm-6" style=""></div>
        <div class="CWlistingBox col-md-4 col-sm-6" style=""></div>
        <div class="CWlistingBox col-md-4 col-sm-6" style=""></div>
    </div>
    <div class="row">
        <div class="CWlistingBox col-md-4 col-sm-6" style=""></div>
        <div class="CWlistingBox col-md-4 col-sm-6" style=""></div>
        <div class="CWlistingBox col-md-4 col-sm-6" style=""></div>
    </div>
    <div class="row">
        <div class="CWlistingBox col-md-4 col-sm-6" style=""></div>
        <div class="CWlistingBox col-md-4 col-sm-6" style=""></div>
        <div class="CWlistingBox col-md-4 col-sm-6" style=""></div>
    </div>
    <div class="CWclear"></div>
</div>