Question

我是这些divs

<div class="col_1_6"></div>
<div class="col_1_4"></div>

<div class="col_1_6"></div>
<div class="col_1_4"></div>

<div class="col_1_4"></div>
<div class="col_1_6"></div>

我想要div的顺序，在 row_content

的div中包含 col_1_4 和 col_1_6

<div class="row_content">
   <div class="col_1_6"></div>
   <div class="col_1_4"></div>
</div>
<div class="row_content">
   <div class="col_1_4"></div>
   <div class="col_1_6"></div>
</div>

我已经尝试过了：

$('.col_1_6, .col_1_4').wrapAll('<div class="row"></div>')

但它包装了所有div而不是每两个div。

感谢您的帮助。

Answer 1

您可以选择所有divs，然后执行每次迭代增加2的for循环。

使用循环的索引，然后可以在jQuery元素上使用.slice并包裹divs。

var $divs = $('.col_1_6, .col_1_4');

for(var i = 0; i < $divs.length; i+=2){
    $divs.slice(i, i+2).wrapAll('<div class="row"></div>');
    console.log($divs);
}

.row{
  background: red;
  margin : 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col_1_6">1</div>
<div class="col_1_4">2</div>

<div class="col_1_6">3</div>
<div class="col_1_4">4</div>

<div class="col_1_4">5</div>
<div class="col_1_6">6</div>

Answer 2

我发现这种方法有效

substring()

但这仅在所有div按此顺序排列时才有效.col_1_6＆gt; .col_1_4而不是.col_1_4＆gt; col_1_6，如你的HTML

http://jsfiddle.net/mrjx9dav/11/

Answer 3

另一个不那么漂亮的解决方案，它包含了以col_1开头的每两个div。

$('div[class^="col_1"]').each(function(ind) {    
    ind%2 === 0 && ($(this).add($(this).next()).wrapAll('<div class="row"></div>'));
});

<强> -Demo-

用不同的类包装两个div

3 个答案: