Wrap ‘n’ number of elements inside a container using jQuery

In this post I am going to explain, how we can wrap some HTML elements inside a container using jQuery. The HTML element can be anything like a <span> or a <div> or even a <img>, but for this demo I am using a <span> to keep it simple. Let’s say we have HTML markup like this:

<div id="parent2" class="parent">
     <span>10</span>
     <span>11</span>
     <span>12</span>
     <span>13</span>
     <span>14</span>
     <span>15</span>
     <span>16</span>
     <span>17</span>
     <span>18</span>
     <span>19</span>
     <span>20</span>
     <span>21</span>
</div>

And now we have a requirement, where we need to wrap all the <span> inside a new <div>, ‘n’ at a time. Let’s say, for this demo, we take ‘n’ as 6 here. So, our desired result is something like this:

<div id="parent2" class="parent">
    <div class="myClass">
        <span>10</span>
        <span>11</span>
        <span>12</span>
        <span>13</span>
        <span>14</span>
        <span>15</span>
    </div>
    <div class="myClass">
        <span>16</span>
        <span>17</span>
        <span>18</span>
        <span>19</span>
        <span>20</span>
        <span>21</span>
    </div>
</div>

Now, we can achieve this using jQuery like this:

var $span = $("#parent2 span");
for (var i = 0; i < $span.length; i += 6) {
    var $div = $("<div/>", {
        class: 'myClass'
    });
    $span.slice(i, i + 6).wrapAll($div);
}

Explanation:

  1. Code in the first line
    var $span = $("#parent2 span");
    

    Now the above code is used to get all the span’s inside the div element with the id as `parent2`.

  2. Code in the second line
    for (var i = 0; i < $span.length; i += 6) {
    

    The above code is used to loop through the span’s that we had found above in the order like i = 0,6,12,… and so on. This is done since we want to wrap all the span’s inside a new div, 6 at a time. So, there’s is no need to go to i = 1 or 7 or 13.. and we can easily do that using  i += 6 .

  3. Code between line number 3 to 5
    var $div = $("<div/>", {
        class: 'myClass'
    });
    

    The above code is used to create a dynamic div with class name ‘myClass’. This div is used to wrap the span’s.

  4. And finally the code in the sixth line
    $span.slice(i, i + 6).wrapAll($div);
    

    Here, we are mainly using two things. First one is the slice and the second one is the wrapAll. Now we are using the slice method here to get 6 spans at a time out of all the span’s. So, lets say when the loop runs for the first time, it would we like  $span.slice(0, 6) . This code will give us the first 6 span’s and when loop runs for the second time, it would we like  $span.slice(6, 12) . This code will give us the next 6 span’s and so on. Next, we are using the wrapAll method to wrap the dynamic div, that we had created above, around all the six spans that we are getting each time the loop is running.

Demo:
Working Demo on jsFiddle

Note:
So, using the above code, we can wrap any number of HTML elements inside a container. This is very useful if you want the elements to be ordered in a proper manner or maybe you want to display ‘n’ number of images in each row inside a div. There’s lots of places where you find the practical usage of this.

If you have any comments or suggestion about this post, I would really appreciate it.

Happy Coding 🙂

Advertisements

13 thoughts on “Wrap ‘n’ number of elements inside a container using jQuery

  1. I like the helpful info you provide on your articles. I’ll bookmark your weblog and test again right here regularly. I am relatively certain I’ll be informed lots of new stuff right here! Best of luck for the next!

  2. I was excited to discover this site. I need to to thank you for your time for this wonderful read!! I definitely savored every bit of it and I have you saved as a favorite to see new information on your website.

  3. Excellent post. I was checking continuously this weblog and I am inspired!
    Very helpful information specifically the closing section 🙂
    I maintain such info much. I used to be looking for this certain info for a long time. Thanks and good luck.

  4. I have been surfing online more than 2 hours today,
    yet I never found any interesting article like yours.
    It is pretty worth enough for me. In my opinion, if all webmasters and bloggers
    made good content as you did, the net will be a lot more useful than ever before.

  5. Can I just say what a relief to discover an individual who genuinely understands what they’re talking about online. You actually understand how to bring an issue to light and make it important. A lot more people ought to read this and understand this side of your story. I was surprised that you aren’t more popular because you surely possess the gift.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s