如何在jquery的每个循环中wrapAll

debugcn 发表于 Dev

沙雷克fcb

我有一些这样的html div：

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

我想要这样的东西：

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

我如何使用每个循环和wrapAll（或其他）在 jQuery 中添加这个包装器？我不想wrapAll手动为每个班级（class_1, class_2, class_3 ...）。

谢谢你的帮助！

斋

您必须提取将它们分组的类class_1, class_2等，然后在每个循环中您可以使用.wrapAll()它们：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。