javascript - 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 内。