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

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

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

1 个答案: