如何在jQuery的每个循环中包装全部

Question

I have some html div like this:

<div class="mainClass class_1"></div>
<div class="mainClass class_1"></div>
<div class="mainClass class_2"></div>
<div class="mainClass class_2"></div>
<div class="mainClass class_2"></div>
<div class="mainClass class_2"></div>
<div class="mainClass class_3"></div>
<div class="mainClass class_3"></div>
<div class="mainClass class_3"></div>
<div class="mainClass class_4"></div>
<div class="mainClass class_4"></div>

I want to have something like that:

<div class="wrapper">
  <div class="mainClass class_1"></div>
  <div class="mainClass class_1"></div
</div>
<div class="wrapper">
   <div class="mainClass class_2"></div>
   <div class="mainClass class_2"></div>
   <div class="mainClass class_2"></div>
   <div class="mainClass class_2"></div>
</div>
<div class="wrapper">
   <div class="mainClass class_3"></div>
   <div class="mainClass class_3"></div>
   <div class="mainClass class_3"></div>
</div>
<div class="wrapper">
   <div class="mainClass class_4"></div>
   <div class="mainClass class_4"></div>
</div>

How can I use each loop and wrapAll (or something else) to add this wrapper in in jQuery ? I don't want to wrapAll manually for every class (class_1, class_2, class_3 ... ).

Thanks for your help!

Answer 1

You could use the jQuery function wrapAll and wrapper every element with the same class, check the example bellow:

 $(".content > div").each(function() { $(".content > ." + this.className).wrapAll("<div class='wrapper' />"); }); 

 div:not(.content):not(.wrapper){ height: 10px; background: #0fc0fc; margin-bottom: 10px; } .wrapper { border: 1px solid #ff0000; margin-bottom: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <div class="class_1"></div> <div class="class_1"></div> <div class="class_2"></div> <div class="class_2"></div> <div class="class_2"></div> <div class="class_2"></div> <div class="class_3"></div> <div class="class_3"></div> <div class="class_3"></div> <div class="class_4"></div> <div class="class_4"></div> </div> 

Answer 2

You have to extract the class which groups them like class_1, class_2 etc. then in the each loop you can .wrapAll() them:

 $('.mainClass').each(function(i, div){ var clazz = this.className.split(/\\s/)[1]; if(!$(this).parent().is('.wrapper')){ $(`.${clazz}`).wrapAll($('<div/>',{ class: 'wrapper'})) } }) 

 .wrapper{ background:yellow; margin:10px; padding:5px; } .mainClass{ height: 20px; } .class_1{ border:solid 1px purple; margin-bottom:10px;} .class_2{ border:solid 1px orange; margin-bottom:10px;} .class_3{ border:solid 1px green; margin-bottom:10px;} .class_4{ border:solid 1px red; margin-bottom:10px;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="mainClass class_1"></div> <div class="mainClass class_1"></div> <div class="mainClass class_2"></div> <div class="mainClass class_2"></div> <div class="mainClass class_2"></div> <div class="mainClass class_2"></div> <div class="mainClass class_3"></div> <div class="mainClass class_3"></div> <div class="mainClass class_3"></div> <div class="mainClass class_4"></div> <div class="mainClass class_4"></div> 

Answer 3

Hi why not select all div's using jquery and use loop on them to get set them up accordingly.Eg

<div class="mainClass class_1"></div>
<div class="mainClass class_1"></div>
<div class="mainClass class_2"></div>
<div class="mainClass class_2"></div>
<div class="mainClass class_2"></div>
<div class="mainClass class_2"></div>
<div class="mainClass class_3"></div>
<div class="mainClass class_3"></div>
<div class="mainClass class_3"></div>
<div class="mainClass class_4"></div>
<div class="mainClass class_4"></div>

now perform jquery operation

$cont = $('div');
var content1 = '<div class="wrapper"><div>';
$.each($cont, function(k,v) {
   if($(v).hasClass('class_1')){
        //content for div with class_1
   } else if($(v).hasClass('class_2')) {
       //content for div with class_2
   } else {
       //include rest content
   }
});

This is just a rough overview how you can create your custom format content Hope it helps