最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - jQuery - Grouping multiple elements with the same class - Stack Overflow

programmeradmin9浏览0评论

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.

Share Improve this question edited May 16, 2015 at 0:39 senectus asked May 16, 2015 at 0:31 senectussenectus 4194 silver badges14 bronze badges 5
  • 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
Add a ment  | 

1 Answer 1

Reset to default 8

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.

发布评论

评论列表(0)

  1. 暂无评论