包装功能jQuery的多个元素

Question

我在jQuery中有此功能

 function row_content(col1, col2) { var divs = col1 + col2; for(var n = 0; n < divs.length; n+=2){ divs.slice(n, n+2).wrapAll('<div class="row-content"></div>'); } } var col_2_3 = $('.col_2_3'); var col_1_3 = $('.col_1_3'); row_content(col_2_3, col_1_3); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class='col_2_3'>Test</div> <div class='col_1_3'>Test</div> <div class='col_2_3'>Test</div> <div class='col_1_3'>Test</div> 

我想要使​​用此功能将两个div包装在.row-content但它不起作用。

谢谢您的帮助 ！

Answer 1

问题是

var divs = col1 + col2;

其中col1,col2是jQuery对象。 上一行将输入连接起来，并且不合并选择器。 所以length不会如您所愿。

使用jQuery .add()

var divs = col1.add(col2);

http://jsfiddle.net/7w6by7Lz/

Answer 2

$('.col_2_3, .col_1_3').wrapAll("<div class='row-content' />");

演示http://jsfiddle.net/5kcr44pv/

UPDATE：OP忘了，更不用说有多重cols

只要两个类的数目相等且交替出现，下面的作品即可。

var cols_2_3 = $('.col_2_3');
var cols_1_3 = $('.col_1_3');

cols_2_3.each(function (index, el) {
    $($(cols_2_3[index]).add(cols_1_3[index])).wrapAll("<div class='row-content' />");
});

演示： http : //jsfiddle.net/5kcr44pv/1/

Answer 3

var wrapper = $('<div class="row-content"></div>');
$('.col_2_3, .col_1_3').wrapAll(wrapper);

现场演示