Wrap multiple div elements on same class

Question

I would like to use jQuery to wrap sets of class elements in a div but can't find the solution.

HTML:

<div class="view-content">

  <div class="first">content</div>
  <div class="first">content</div>
  <div class="second">content</div>
  <div class="third">content</div>
  <div class="third">content</div>

</div>

Desired Result:

<div class="view-content">

  <div class="column">
    <div class="first">content</div>
    <div class="first">content</div>
  </div>

  <div class="column">
    <div class="second">content</div>
  </div>

  <div class="column">
    <div class="third">content</div>
    <div class="third">content</div>
  </div>

</div>

score 9 · Answer 1 · answered Jun 05 '12 at 11:26

9

Demo http://jsfiddle.net/kQz4Z/8/

API: http://api.jquery.com/wrapAll/

Added a break line so that you can see the difference here :) http://jsfiddle.net/kQz4Z/10/

code

$(function() {

    $('.first').wrapAll('<div class="column" />')

    $('.second').wrapAll('<div class="column" />')

    $('.third').wrapAll('<div class="column" />')




    alert($('.view-content').html());
});

answered Jun 05 '12 at 11:26

Tats_innit

33,991
10
71
77

@h2ooooooo here you go http://jsfiddle.net/ZXb4Y/1/ :)) Nice one! set it as your answer if you want, cheers. – Tats_innit Jun 05 '12 at 11:35
1

Guys, and how about [mine dynamical](http://stackoverflow.com/a/10896724/1249581)? :) – VisioN Jun 05 '12 at 11:52
1

@VisioN Broooo how have you been :P okies +1 to you as well man – Tats_innit Jun 05 '12 at 11:54

score 3 · Answer 2 · answered Jun 05 '12 at 11:31

3

Use wrapAll() method

$(function(){
    var classes = ['.first', '.second', '.third'];

    for (i = 0; i < classes.length; i++) {
        $(classes[i]).wrapAll('<div class="column">');
    }

});

Demo: http://jsfiddle.net/g9G85/

answered Jun 05 '12 at 11:31

charlietfl

170,828
13
121
150

This is great! Thank you so much! – crystallove18 Nov 22 '19 at 22:35

score 2 · Answer 3 · answered Jun 05 '12 at 11:45

2

Or here is the very short dynamical solution:

$(".view-content > div").each(function() {
    $(".view-content > ." + this.className).wrapAll("<div class='column' />");
});

DEMO: http://jsfiddle.net/CqzWy/

answered Jun 05 '12 at 11:45

VisioN

143,310
32
282
281

It should be noted that this method in its current form MUST employ the child combinator selector (>) as shown. Failure to do so will result in a wrapping div for each item that matches a certain className. (For example, in this case, divs with class "third" would be wrapped in TWO divs with class "column"). – Luke Jun 08 '14 at 03:36

score 1 · Answer 4 · answered Jun 05 '12 at 11:25

You can use .wrap() to wrap something in a div but if your content is not ordered it will become a mess, here's an example:

Input

<div class="view-content">
    <div class="first">content</div>
    <div class="second">content</div>
    <div class="first">content</div>
</div>

Output

<div class="view-content">
    <div class="column">
        <div class="first">content</div>
        <div class="column">
            <div class="second">content</div>
        </div>
        <div class="first">content</div>
    </div>
</div>

score 0 · Answer 5 · answered Jun 05 '12 at 13:02

You could try whit this:

var arr = $(".view-content div").map(function() { return $(this).attr('class'); }).get();
var results = $.unique(arr);
var i;

for(i = 0; i < results.length; i++){

    $('.out').append('<div class="columns"></div>');
    $('.'+results[i]).clone().appendTo('.columns:last');
}

alert($('.out').html());

Here an example:

JSFIDDLE

Wrap multiple div elements on same class

5 Answers5

Linked

Related