如何为不同的类包装特定类的所有内容？

Question

请考虑以下几点：

<nav class="folder_sesssion_file dynamc_class"></nav>
<nav class="folder_sesssion_file dynamc_class"></nav>

然后这个：

<nav class="folder_sesssion_file another_dynamic_class"></nav>
<nav class="folder_sesssion_file another_dynamic_class"></nav>

我想通过根据像dynamic_class这样的公共类对它们进行分组来包装所有这些榆树。这样就有可能做到以下几点。

<section class="new_parent_class">
  <nav class="defualt_class dynamc_class" data-class="dynamc_class"></nav>
  <nav class="defualt_class dynamc_class" data-class="dynamc_class"></nav>
  <section>
    <section class="new_parent_class">
      <nav class="defualt_class some_class" data-class="some_class"></nav>
      <nav class="defualt_class some_class" data-class="some_class"></nav>
      <section>

我搞不懂逻辑。

我尝试了以下方法，但是，我认为我不应该使用“每个”。

​

$(".defualt_class").each(function(index, element) {
  var channel_class = $(this).attr('data-class');
  $("." + channel_class + "").wrapAll('<section class="new_parent_class">');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="new_parent_class">
  <nav class="defualt_class dynamc_class" data-class="dynamc_class"></nav>
  <nav class="defualt_class dynamc_class" data-class="dynamc_class"></nav>
  <section>
    <section class="new_parent_class">
      <nav class="defualt_class some_class" data-class="some_class"></nav>
      <nav class="defualt_class some_class" data-class="some_class"></nav>
      <section>

​

Answer 1

在迭代元素时，使用一个数组来保存类名，然后您可以迭代它来根据这些类中的每一个来包装元素。

您的代码将如下所示：

var cats = []; // An array to hold the class names
var $elems = $('.common-class'); // All elements of common-class

// iterate all elements of common-class
$elems.each(function(idx, elem) { 
    // get the last class name
    var dynClass = elem.className.split(' ').pop(); 

    // apply the data attribute with this name
    elem.dataset.class = dynClass; 

    // store the class name in the array if not already done
    if (cats.indexOf(dynClass) == -1) { cats.push(dynClass); }
});

// iterate the array
cats.forEach(function(cls) {
    // for each class name, wrap elements in new-parent
    $('.' + cls).wrapAll('<section class="new-parent">');
});

演示Fiddle: http://jsfiddle.net/abhitalks/zj6cm0j0/2/

演示片段：

​

var $elems = $('.common-class');
function group() {
    var cats = [];
    $elems.each(function(idx, elem) {
        var dynClass = elem.className.split(' ').pop();
        elem.dataset.class = dynClass;
        if (cats.indexOf(dynClass) == -1) { cats.push(dynClass); }
    });
    cats.forEach(function(cls) {
        $('.' + cls).wrapAll('<section class="new-parent">');
    });
}
$('#btn').on('click', group);

section { 
    background-color: #ddd; border: 1px solid #999; 
    margin: 8px; padding: 8px; 
}
nav.dynamic-class { background-color: #99d; margin: 8px; padding: 4px; }
nav.some-class { background-color: #9d9; margin: 8px; padding: 4px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Start Grouping</button>
<nav class="common-class dynamic-class">Dynamic-1</nav>
<nav class="common-class some-class">Some-A</nav>
<nav class="common-class dynamic-class">Dynamic-2</nav>
<nav class="common-class some-class">Some-B</nav>

​