我有以下结构,我需要将 div
包裹在 .item
周围。
有些地方有两个项目,有些地方只有一个项目:
<div class="section">
<div class="heading"></div>
<div class="item"></div>
<div class="item"></div>
<div class="heading"></div>
<div class="item"></div>
<div class="item"></div>
<div class="heading"></div>
<div class="item"></div>
<div class="heading"></div>
<div class="item"></div>
<div class="item"></div>
</div>
我需要这种格式的输出:
<div class="section">
<div class="heading"></div>
<div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="heading"></div>
<div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="heading"></div>
<div>
<div class="item"></div>
</div>
<div class="heading"></div>
<div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
我尝试使用以下代码,但它将所有代码包装到一个类中。
var classes = {};
$(".section > div").each(function() {
classes[$(this).attr("class")] = true;
});
for (singleClass in classes) {
$("." + singleClass).wrapAll('<div class="item" />');
}
最佳答案
使用 .each()
遍历 .heading
元素,并在循环中使用 .nextUntil()
选择彼此相邻的 .item
然后使用 .wrapAll()
$(".heading").each(function(){
$(this).nextUntil(".heading").wrapAll("<div></div>");
});
.heading + div {background: #ccc}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">
<div class="heading">heading</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="heading">heading</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="heading">heading</div>
<div class="item">item</div>
<div class="heading">heading</div>
<div class="item">item</div>
<div class="item">item</div>
</div>
关于javascript - jQuery/js 将具有相同类的近 div 包装成单个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55448748/