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

我试图通过使用每个()来提出一个更优雅的解决方案

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

你可以试试这个:

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

在此示例中,每个组都将位于具有类名称的父div中parent-section-1,parent-section-2因此.