javascript - 如何为不同的类包装某个类的所有元素？

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 等常见类对它们进行分组来包装所有这些 elms。这样以下的事情就成为可能。

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

我无法弄清楚逻辑。

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

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