Question

我正在尝试使用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（）关于我能想到的每一种方式，但我得到的只是错误。非常感谢。

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

Answer 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"/>');
}

Answer 3

我不确定你需要包裹2-3个div是什么意思.. 你可以使用$ .wrap（）来实现这个目标..

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

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

用孩子包裹一组元素

3 个答案: