jQuery - 使用同一类对多个元素进行分组

Question

我有一堆元素都属于某个数字的一​​部分。

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

...

我想用父元素包装每组相同的部分元素，即使是只出现一次的部分。

这是我想出的一个快速且有效但非常肮脏的解决方案：

    $('.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">');

我试图通过使用 each() 提出一个稍微优雅的解决方案

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

但后来我意识到这会将每个类名的每个单独出现都包装起来，而不是将它们包装成一个组。

最重要的是，虽然目前只有 6 个部分，但未来可能会更多（7、8、9、10、11 等），所以如果该功能可以与任何数字一起使用，那就太好了部分。

非常感谢任何帮助。

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>');
});

在此示例中，每个组都将位于类名为 parent-section-1、parent-section-2 等的父 div 中。