时间戳

首页 > 解决方案 > jQuery/js 将具有相同类的 div 附近包装成单个 div

javascript - jQuery/js 将具有相同类的 div 附近包装成单个 div

问题描述

我有以下结构，我需要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" />');
}

标签： javascriptjqueryhtmljquery-selectors

解决方案

使用和在循环中循环选择彼此相邻的元素.heading，然后使用包装它们.each().item.nextUntil().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>

推荐阅读