I have a bunch of elements that all belong to a section of a certain number.

<div class="section-1"></div>
<div class="section-1"></div>

<div class="section-2"></div>
<div class="section-2"></div>
<div class="section-2"></div>

<div class="section-3"></div>

<div class="section-4"></div>
<div class="section-4"></div>

...

I want to wrap each group of the same section elements with a parent element, even sections that occur only once.

This is a quick and working, but very dirty solution that I came up with:

    $('.section-1').wrapAll('<div class="parent-section">');
    $('.section-2').wrapAll('<div class="parent-section">');
    $('.section-3').wrapAll('<div class="parent-section">');
    $('.section-4').wrapAll('<div class="parent-section">');
    $('.section-5').wrapAll('<div class="parent-section">');
    $('.section-6').wrapAll('<div class="parent-section">');

I tried to e up with a slightly more elegant solution by using each()

    $('.section-1,' +
      '.section-2,' +
      '.section-3,' +
      '.section-4,' +
      '.section-5,' +
      '.section-6').each(function () {
        $(this).wrapAll('<div class="parent-section">');
    });

But then I realised that this will wrap each individual occurrence of every class name and not wrap them as a group.

On top of that, while currently there are only 6 sections, there might be more in the future (7, 8, 9, 10, 11 etc.), so it would be great if the function could work with any number of sections.

Any help is much appreciated.

I have a bunch of elements that all belong to a section of a certain number.

<div class="section-1"></div>
<div class="section-1"></div>

<div class="section-2"></div>
<div class="section-2"></div>
<div class="section-2"></div>

<div class="section-3"></div>

<div class="section-4"></div>
<div class="section-4"></div>

...

I want to wrap each group of the same section elements with a parent element, even sections that occur only once.

This is a quick and working, but very dirty solution that I came up with:

    $('.section-1').wrapAll('<div class="parent-section">');
    $('.section-2').wrapAll('<div class="parent-section">');
    $('.section-3').wrapAll('<div class="parent-section">');
    $('.section-4').wrapAll('<div class="parent-section">');
    $('.section-5').wrapAll('<div class="parent-section">');
    $('.section-6').wrapAll('<div class="parent-section">');

I tried to e up with a slightly more elegant solution by using each()

    $('.section-1,' +
      '.section-2,' +
      '.section-3,' +
      '.section-4,' +
      '.section-5,' +
      '.section-6').each(function () {
        $(this).wrapAll('<div class="parent-section">');
    });

But then I realised that this will wrap each individual occurrence of every class name and not wrap them as a group.

On top of that, while currently there are only 6 sections, there might be more in the future (7, 8, 9, 10, 11 etc.), so it would be great if the function could work with any number of sections.

Any help is much appreciated.

• javascript
• jquery

• If you control the markup, can you just give all of those divs some class, such as simply section that would allow you to select elements that way? – p e p Commented May 16, 2015 at 0:34
• Yes, I can control the markup and add a mon class. – senectus Commented May 16, 2015 at 0:37
• my bad, I misunderstood. That wouldn't help, you are trying to wrap each group. – p e p Commented May 16, 2015 at 0:38
• If you control the markup, why aren't you doing this within the loop that generates the markup? – charlietfl Commented May 16, 2015 at 0:54
• Sorry, I don't actually pletely control the markup as I can't add new elements, I can only alter the existing classes or add new classes. – senectus Commented May 16, 2015 at 0:59

1 Answer 1

You may try this:

// Get all the classes
var classes = $('[class^=section]').map(function() {
    return $(this).attr('class');
});

// Filter only unique ones
var uniqueClasses = $.unique(classes);

// Now group them
$(uniqueClasses).each(function(i, v)
{
    $('.'+v).wrapAll('<div class ="parent-'+v+'"></div>');
});

In this example, each group will be inside a parent div with class name parent-section-1, parent-section-2 and so.