Question

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. 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.

Answer 1

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/