jQuery/js将具有相同类的相邻div包装成单个div

Question

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

- Mukeysh

Answer 1

使用.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>

- Mohammad

Answer 2

try

let h,s= document.querySelector('.section');

[...s.children].forEach(e=>  {
  if(e.className=='heading') { 
    h=document.createElement("div")
    e.insertAdjacentElement('afterend',h)
  } else {
    h.appendChild(e)
  }
})

function change() {
  let h,s= document.querySelector('.section');

  [...s.children].forEach(e=>  {
    if(e.className=='heading') { 
      h=document.createElement("div")
      e.insertAdjacentElement('afterend',h)
    } else {
      h.appendChild(e)
    }
  })
}

div { margin-left: 30px;}

<button onclick="change()">Click here to change</button>

<div class="section">
  <div class="heading">head 1</div>
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="heading">head 2</div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
  <div class="heading">head 3</div>
  <div class="item">item 5</div>
  <div class="heading">head 4</div>
  <div class="item">item 6</div>
  <div class="item">item 7</div>
</div>

- Kamil Kiełczewski

---

@Mohammad 不行 - 在 Chrome 控制台中检查。 - Kamil Kiełczewski

Answer 3

1. 使用nextUntil()与wrapAll()

$(".heading").each(function() {
  $(this).nextUntil(".heading").wrapAll("<div class='red'></div>")
});

.red {
  border: red 1px solid
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">
  <div class="heading">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="heading">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="heading">7</div>
  <div class="item">8</div>
  <div class="heading">9</div>
  <div class="item">0</div>
  <div class="item">-</div>
</div>

- guradio