用子元素包裹一组元素答案

【问题标题】：Wrap a group of elements with children用子元素包裹一组元素
【发布时间】：2013-12-17 01:39:29
【问题描述】：

我正在尝试使用 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>

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

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

在 div class="row" 中，具体取决于屏幕宽度。我已经尝试了 .wrap() 和 .wrapAll() 几乎所有我能想到的方法，但我得到的只是错误。非常感谢。

【问题讨论】：

不是所有的 div 都缺少关闭 </div> 标记吗？
不，它们就在我刚刚从 firebug 中复制出来的代码中，没有打开它们以便清楚。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

你可以使用：

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

:lt(3) 将 div 包装成三个一组。使用:lt(2) 将它们包装成两个一组。

jsFiddle example

以上将产生：

<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>

【讨论】：

我做了一个test，你的代码请求DOM，但它并不比缓存慢。
j08691 和 undefined 的答案都非常好，并且在测试页面上运行良好，不幸的是我似乎与其他代码有一些冲突，所以我仍然在踢自己，但感谢伟大的答案。迈克
一开始我没有意识到，但有些 div 包含脚本标签，显然 .wrap 执行脚本存在问题。link 在我的情况下，它们用于将 html 元素写入页面所以我可以在使用上面的代码之前简单地删除它们，就像link

【解决方案2】：

您可以使用jQuery .slice() 方法和一个简单的for 循环：

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

【讨论】：

【解决方案3】：

我不确定你需要包装的 2-3 div 是什么意思.. 您可以为此使用 $.wrap() ..

Jsfiddle：http://jsfiddle.net/kHRJA/

$('.col-md-4').wrap("<div class='row'>");

【讨论】：

他的意思是他需要将 div 以两个或三个一组的形式包装在一起。