How to add wrapper div for 2 child divs (all child divs having same class)

Question

I am having one div with four child divs with same class..all habving same class..I want two wrap 2 divs inside one parent div..I cant add through html or add any classes because its coming from drupal template ..is there any way to add seperate wrapper divs for first two and last two divs ..thanks in advance

 $( ".myclass" ).wrapAll( "<div class='row' />"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <div class="row"> <div class="myclass"></div> <div class="myclass"></div> <div class="myclass"></div> <div class="myclass"></div> </div> 

Answer 1

As I understand, you want to wrap the first two elements inside another new row right?

This should do it:

 var elements = $( ".myclass" ); $([elements[0], elements[1]]).wrapAll( "<div class='row' />"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <div class="row"> <div class="myclass"></div> <div class="myclass"></div> <div class="myclass"></div> <div class="myclass"></div> </div> 

That should do it.

Answer 2

Use :lt() selector

Description: Select all elements at an index less than index within the matched set.

This means select all element with index less than 2 which is first and second element which has index of 0 and 1 respectively

 $(".myclass:lt(2)").wrapAll("<div class='row' />"); 

 .row { color: red } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <div class="myclass">1</div> <div class="myclass">2</div> <div class="myclass">3</div> <div class="myclass">4</div> 

Answer 3

You can use slice .

 $('.myclass').slice(0,2).wrapAll( "<div class='row' />"); $('.myclass').slice(2,4).wrapAll( "<div class='row' />"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <div class="row"> <div class="myclass">1</div> <div class="myclass">2</div> <div class="myclass">3</div> <div class="myclass">4</div> </div> 

Answer 4

Alternatively, you can use this:

$('.myclass:eq(0),.myclass:eq(1),').wrapAll('<div class="row1"></div>');
$('.myclass:eq(2),.myclass:eq(3),').wrapAll('<div class="row2"></div>');

In the above example, I have used the :eq() selector to select the children div's. In this method, indexing starts from 0 (just like arrays).