Wrapping divs based on a dynamic class?

Take the following HTML for example:

<div class="container">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
<div class="header">Content</div>
<div class="header">Content</div>
<div class="header">Content</div>
<div class="footer">Content</div>
<div class="footer">Content</div>
<div class="footer">Content</div>
</div>

What result I'm trying to achieve is:

<div class="container">

<div class="tabarea">
<div class="body">Content</div>
<div class="body">Content</div>
<div class="body">Content</div>
</div>

<div class="tabarea">
<div class="header">Content</div>
<div class="header">Content</div>
<div class="header">Content</div>
</div>

<div class="tabarea">
<div class="footer">Content</div>
<div class="footer">Content</div>
<div class="footer">Content</div>
</div>

</div>

I've already searched for hours through several topics and have also tried several jQuery combinations(to no avail though), like:

$('.container div').each(function(){
      $(this).wrap('<div class="tabarea"></div>');
    });

But this selects every div listed above and wraps in a tabarea classed div.

I know I could probably list each class individually, but there will likely be more added in the future开发者_StackOverflow中文版. And it has to be done on the client side because the HTML is generated after the tab interface I'm using is called (jQuery UI tabs).

Basically, I'm stuck on how to choose the multiple class selectors at once to start the function.

---

You can do:

var classes = [];

$('div.container div').each(function() {
    var cssClass = $(this).attr('class');
    if ($.inArray(cssClass, classes) == -1)
        classes.push(cssClass);
});

var i = classes.length;
while (i--) {
    $('div.' + classes[i]).wrapAll('<div class="tabarea"></div>');
}

This will built a list of all the individual classes and then wrap each group (assuming they're next to each other)

http://jsfiddle.net/PCXvb/2/

---

you could do something like this:

var container = $('<div class="tabarea"></div>')
                    .insertBefore('.container div.body:first');
$('.container div.body').appendTo(container);

and you can extend it for multiple selectors:

var container = $('<div class="tabarea"></div>');
var selectors = [
    ".container div.body",
    ".container div.header",
    ".container div.footer"
];
$.each(selectors,function(i,selector){
    var el = $(selector);
    var c = container
        .clone()
        .insertBefore(el.eq(0));
    el.appendTo(c);
});

UPDATE : live demo

---

It's to simple...

$('.container div').each(function()
{
    // Make sure this div isn't already inside a tabarea div
    if (!$(this).parent('.tabarea').length) {
        // Call wrapAll to wrap all divs of this class
        $("div." + $(this).attr("class")).wrapAll('<div class="tabarea"></div>');
    }
});

This will dynamically read what your had but instead of wrapping everything, it will take the div's class and select all div elements with that class. Therefore it will offer you a fast and dynamic solution. However you can probably improve it (it will now do it to much as it executes this for every div in the container)