jQuery 实战：无需添加类名，自动包裹同级标题间的所有元素-html教程-PHP中文网

jQuery 实战：无需添加类名，自动包裹同级标题间的所有元素

本文介绍如何使用 jQuery 的 nextUntil() 和 wrapAll() 方法，精准包裹两个同级标题（如）之间的所有中间元素，无需为任何元素添加额外 class，适用于动态内容结构的折叠面板、文档章节等场景。

本文介绍如何使用 jquery 的 `nextuntil()` 和 `wrapall()` 方法，精准包裹两个同级标题（如 `

`）之间的所有中间元素，无需为任何元素添加额外 class，适用于动态内容结构的折叠面板、文档章节等场景。

在构建可折叠内容区域（如 FAQ、文档大纲或手风琴组件）时，常需将每个标题（如 <h2></h2>）与其后跟随的内容统一包裹进一个容器中，以便统一控制显示/隐藏、添加过渡动画或应用样式。但若内容结构不固定——例如某节含多个 <p></p>、一个 <h3></h3> 和一个 <ul></ul>——仅用 .next() 就会失效，因为它只选取紧邻的单个后续兄弟元素。

此时，nextUntil(selector) 是理想解决方案：它能选取从当前元素开始、直到（但不包含）下一个匹配指定选择器的兄弟元素之间的全部元素。配合 wrapAll(html)，即可一次性将这些元素包裹进同一个父容器。

以下是完整、健壮的实现代码：

$(document).ready(function() {
  $('.axxs-accordion h2').each(function() {
    const $h2 = $(this);
    const $content = $h2.nextUntil('h2'); // 获取该 h2 后所有非 h2 的连续兄弟元素
    if ($content.length > 0) {
      $content.wrapAll('<div class="section-content"></div>');
    }
  });
});

✅ 关键点说明：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

$('.axxs-accordion h2') 精准定位所有目标标题，无需预设 class；
.nextUntil('h2') 自动识别“下一节标题”的边界，无论中间是 <p></p>、<div>、<code><h3></h3> 还是混合标签；
wrapAll() 确保多个连续元素被包裹进同一个 <div>，而非各自生成独立容器（区别于 <code>wrap()）；
if ($content.length > 0) 避免对末尾无内容的 <h2></h2> 执行空包裹，提升健壮性。

⚠️ 注意事项：

此方法依赖 DOM 元素的兄弟关系与顺序，确保所有待包裹内容严格位于两个 <h2></h2> 之间且为同级元素；
若 <h2></h2> 后紧跟另一个 <h2></h2>（即空节），$content 为空，wrapAll() 不会报错，但也不会生成无意义的空 <div>； <li>如需支持其他标题层级（如 <code><h3></h3> 分组），只需将 'h2' 替换为 'h3'，并调整选择器即可复用；
建议在 $(document).ready() 中执行，确保 DOM 已加载完成。