如何用jQuery将多个h2元素间的内容统一包裹进div？

后续兄弟元素到

中 #

原始HTML示例 #

假设你的页面结构如下（

数量不固定）：

<div class="container">
  <h2>标题1</h2>
  <p>段落1内容</p>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>
  <h3>子标题1</h3>
  <h2>标题2</h2>
  <p>段落2内容</p>
  <h2>标题3</h2>
  <div>自定义区块</div>
  <p>段落3内容</p>
</div>

实现代码 #

$(function() {
  // 遍历所有<h2>元素
  $('h2').each(function() {
    // 筛选当前<h2>之后到下一个<h2>前的所有兄弟元素，统一包裹
    $(this).nextUntil('h2').wrapAll('<div class="section-content"></div>');
  });
});

代码说明 #

• $('h2').each()：遍历页面中所有

  ，自动适配任意数量的

• nextUntil('h2')：精准获取当前

  之后的所有兄弟元素，直到遇到下一个

  停止，完美匹配你要的范围

• wrapAll()：把选中的所有元素一次性包裹到指定
  中，不会破坏原有元素的层级结构

注意事项 #

• 务必确保jQuery已正确引入，代码放在$(function(){})内（DOM加载完成后执行），避免因元素未加载导致找不到节点
• 如果

  分布在不同父容器中，需要给选择器加上父容器限定，比如$('.container h2').each(...)，防止跨容器错误处理

• 可根据需求修改包裹
  的属性，比如添加id、自定义属性或样式类，例如wrapAll('<div id="content-1" class="section-content"></div>')

内容的提问来源于stack exchange，提问作者joko13