Jquery wrap elements inside div

Question

I want to add a div on the three following elements:

<div class="wrapper">
   <fieldset class="inner"></fieldset>
   <fieldset class="inner first_name"></fieldset>
   <fieldset class="inner last_name"></fieldset>
   <fieldset class="inner user"></fieldset>
   <fieldset class="inner password"></fieldset>
   <fieldset class="inner"></fieldset>
   <fieldset class="inner avatar"></fieldset>
   <fieldset class="inner submit"></fieldset>
</div>

So the results are as follows:

<div class="wrapper">

   <div class="inner-left">
      <fieldset class="inner"></fieldset>
      <fieldset class="inner first_name"></fieldset>
      <fieldset class="inner last_name"></fieldset>
      <fieldset class="inner user"></fieldset>
      <fieldset class="inner password"></fieldset>
   </div>

   <div class="inner-middle">
      <fieldset class="inner"></fieldset>
      <fieldset class="inner avatar"></fieldset>
   </div>

   <div class="inner-right">
      <fieldset class="inner submit"></fieldset>
   </div>

</div>

I've tried Jquery Multiple Wrap, but I can not implement it. can it be done with jQuery?

Thank you,

Did you have a look [here](http://stackoverflow.com/questions/3475594/jquery-use-wrap-to-wrap-multiple-elements)? — John, Jun 20 '14 at 09:03

Sudharsan S · Accepted Answer · 2014-06-20T09:18:59.913

3

Use .wrapAll() in jquery. And .slice() split the dom elements what you want

$(".inner").slice(0,5).wrapAll( "<div class='inner-left'></div>" );
$(".inner").slice(5,7).wrapAll( "<div class='inner-middle'></div>" );
$(".inner").slice(7).wrapAll( "<div class='inner-right'></div>" );

DEMO

var cache = $( ".inner" )

cache.slice(0,5).wrapAll( "<div class='inner-left'></div>" )
     .end()
     .slice(5,7).wrapAll( "<div class='inner-middle'></div>" )
     .end()
     .slice(7).wrapAll( "<div class='inner-right'></div>" );

edited Jun 20 '14 at 09:18

answered Jun 20 '14 at 09:10

Sudharsan S

15,336
3
31
49

Please, please cache the result of `$(".inner")`, so you don't waste time matching the same elements again and again. – Frédéric Hamidi Jun 20 '14 at 09:14
Hi, Sudharsan. This works for me, thank you for saving my time :) – Yudi Jun 20 '14 at 09:17
@FrédéricHamidi - Don't use please in comment. We all are learn here that solve. Please delete the comment. Thanks – Sudharsan S Jun 20 '14 at 09:36

score 1 · Answer 2 · answered Jun 20 '14 at 09:17

You can use :lt and :gt pseudo selectors to get a range of elements, then wrapAll to put them in an element:

$('.inner:lt(5)').wrapAll($('<div>').addClass('inner-left'));
$('.inner:gt(4):lt(2)').wrapAll($('<div>').addClass('inner-middle'));
$('.inner:gt(6)').wrapAll($('<div>').addClass('inner-right'));

Demo: http://jsfiddle.net/7JY8p/1/

score 0 · Answer 3 · answered Jun 20 '14 at 09:12

Try this

$('.inner:eq(0), .inner:eq(1), .inner:eq(2), .inner:eq(3), .inner:eq(4)').wrapAll( "<div class='inner-left'></div>");

$('.inner:eq(5), .inner:eq(6)').wrapAll( "<div class='inner-middle'></div>");

$('.inner:eq(7)').wrap( "<div class='inner-right'></div>");

Jquery wrap elements inside div

3 Answers3

Linked