如何用jQuery包裹标题后至同级或更高标题前的所有元素？

嘿，这个需求我之前处理文档结构渲染的时候刚好碰到过，用jQuery可以很优雅地实现。核心思路是先给每个标题定义层级（h1=1、h2=2…h6=6），然后遍历每个标题，筛选出它后面直到同级或更高层级标题前的所有兄弟元素，最后统一包裹这些元素。下面是具体的实现方案：

实现代码 #

$(document).ready(function() {
  // 遍历页面中所有的标题元素
  $('h1, h2, h3, h4, h5, h6').each(function() {
    const $currentHeading = $(this);
    // 获取当前标题的层级：从标签名中提取数字，比如h3对应3
    const currentLevel = parseInt($currentHeading.prop('tagName').slice(1));
    
    // 筛选当前标题之后、直到同级/更高层级标题前的所有元素
    const $elementsToWrap = $currentHeading.nextUntil(function() {
      const tagName = $(this).prop('tagName');
      // 判断当前元素是否是标题，且层级≤当前标题层级（更高/同级）
      if (/H[1-6]/.test(tagName)) {
        const elementLevel = parseInt(tagName.slice(1));
        return elementLevel <= currentLevel;
      }
      return false;
    });
    
    // 如果有需要包裹的元素，就用容器包裹起来
    if ($elementsToWrap.length > 0) {
      $elementsToWrap.wrapAll('<div class="heading-section-content" />');
    }
  });
});

代码解释 #

1. 遍历标题：先选中页面中所有h1到h6元素，逐个处理。
2. 确定层级：通过标题标签名提取层级数字（比如h5的层级是5，比h6的6更高）。
3. 筛选目标元素：用nextUntil()方法，传入自定义过滤函数——只要遇到层级小于等于当前标题的标题元素，就停止筛选，中间的所有兄弟元素就是我们要包裹的内容。
4. 包裹元素：如果筛选到了元素，用wrapAll()把它们统一包裹到一个容器里（这里用了heading-section-content类名，你可以根据需求修改标签或类名）。

效果示例 #

假设原始HTML结构是这样的：

<h2>二级标题</h2>
<p>这是二级标题下的段落内容</p>
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
</ul>
<h3>三级标题</h3>
<p>这是三级标题下的段落</p>
<h2>另一个二级标题</h2>
<p>新的二级标题内容</p>

执行代码后，结构会变成：

<h2>二级标题</h2>
<div class="heading-section-content">
  <p>这是二级标题下的段落内容</p>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>
  <h3>三级标题</h3>
  <div class="heading-section-content">
    <p>这是三级标题下的段落</p>
  </div>
</div>
<h2>另一个二级标题</h2>
<div class="heading-section-content">
  <p>新的二级标题内容</p>
</div>

可以看到：

• 二级标题后的所有元素，直到下一个二级标题前的内容都被包裹了（包括中间的三级标题及其内容）
• 三级标题后的内容也被单独包裹，直到遇到更高层级的二级标题为止，完全符合需求。

注意事项 #

• 确保页面已经正确引入jQuery库，代码要在DOM加载完成后执行（用$(document).ready()或者把代码放在<body>标签末尾）。
• 如果需要自定义包裹容器，直接修改wrapAll()里的HTML片段即可，比如换成<section class="content-block">。
• 这个代码只会处理同级的标题和元素，如果标题嵌套在其他容器（比如<div>、<article>）里，不会跨容器处理，这符合常规的页面结构逻辑。

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