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

Posted 2023-05-09

【中文标题】jQuery/js 将具有相同类的 div 附近包装成单个 div

【英文标题】：jQuery/js wrap near div with same classes into single div

【发布时间】：2019-08-22 05:50:23

【问题描述】：

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

【参考方案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>

【参考方案2】：

试试

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>

【讨论】：

@Mohammad no - 签入 chrome 控制台

【参考方案3】：

将 nextUntil() 与 warpAll() 一起使用

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