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>

我无法弄清楚逻辑。

我尝试了以下内容，但是，我不认为我应该使用＆＃34;每个＆＃34;。

＆＃13;

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

＆＃13;

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

＆＃13;

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

演示小提琴：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>

如何为不同的类包装某个类的所有alement？

1 个答案: