javascript - 如何在jquery的每个循环中包装All

Question

我有一些div这样的html：

<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 ...）。

谢谢你的帮助！

标签： javascriptjqueryhtmlcss

Answer 1

您可以使用 jQuery 函数wrapAll并使用相同的类包装每个元素，请查看以下示例：

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