包装功能jQuery的多个元素

Question

I've this function in 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> 

I want, with this function to wrap two divs in .row-content but it does not work.

Thanks for the help !

Answer 1

The problem is

var divs = col1 + col2;

Where col1,col2 are jQuery objects. The above line concatenates the inputs and Does not combine the selectors. So length wont work as you wish to.

Use jQuery .add()

var divs = col1.add(col2);

http://jsfiddle.net/7w6by7Lz/

Answer 2

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

Demo http://jsfiddle.net/5kcr44pv/

UPDATE: OP forgot to mention there were multiple cols

Below works as long as there are equal number of both classes and they alternate.

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

DEMO: http://jsfiddle.net/5kcr44pv/1/

Answer 3

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

FIDDLE DEMO