How to wrap all alements of a certain class for different classes?

Question

Consider the following:

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

And then this:

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

I want to wrap all these elms by grouping them based on common classes like dynamic_class . So that the following is possible.

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

I can't figure out the logic.

I tried the following, but well, I don't think I should be using "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

While iterating the elements, use an array to hold the class name which you can then later iterate to wrap the elements based on each of those classes.

Your code would look like this:

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

Demo Fiddle: http://jsfiddle.net/abhitalks/zj6cm0j0/2/

Demo Snippet:

 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>