本文介绍如何利用 jQuery 的 nextUntil() 和 wrapAll() 方法，自动将文档中相邻 标签之间的所有 DOM 元素（无论类型）统一包裹进一个容器，完全无需手动添加 class 或其他标记。
本文介绍如何利用 jquery 的 `nextuntil()` 和 `wrapall()` 方法，自动将文档中相邻 `
` 标签之间的所有 DOM 元素（无论类型）统一包裹进一个容器，完全无需手动添加 class 或其他标记。
在构建可折叠手风琴（accordion）或分节内容区域时，常需将每个标题（如 ）与其后跟随的内容块整体封装为独立模块。但若内容结构不统一——有的仅含一个 ，有的包含多个 、、.next() 就会失效，因为它只选取紧邻的单个后续兄弟元素。
此时，jQuery 提供的 .nextUntil(selector) 是理想解法：它能精准选取从当前元素开始、直到遇到指定选择器（如 'h2'）为止的所有连续兄弟元素（不包含终止元素本身），再配合 .wrapAll() 即可一次性包裹整个片段。
以下是完整、健壮的实现代码：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
$(document).ready(function() {
$('.axxs-accordion h2').each(function() {
const $h2 = $(this);
const $content = $h2.nextUntil('h2'); // 获取该 h2 后、下一个 h2 前的所有兄弟元素
if ($content.length > 0) { // 避免空包裹（如结尾 h2 后无内容）
$content.wrapAll('<div class="section-content"></div>');
}
});
});
✅ 关键点说明：
-
nextUntil('h2')不依赖任何 class，仅基于 HTML 结构层级和标签语义，天然适配任意内容类型； -
.each()确保每个独立处理，避免跨段误包； - 显式检查
$content.length > 0可防止末尾标题后生成空，提升 DOM 健康度；wrapAll()将匹配到的所有元素作为整体移入新容器，保持原有顺序与嵌套关系。⚠️ 注意事项：
- 确保目标标题标签（如
h2）在 DOM 中是同级兄弟关系，若存在嵌套（如h2在div内），需调整选择器（如.axxs-accordion > h2）； - 若需支持多级标题（如同时处理
h2和h3分组），可扩展为nextUntil(':header:not(h1)')，但需注意:header伪类包含h1–h6，应结合实际结构谨慎使用； - 纯前端方案依赖 JavaScript 执行时机，务必确保 DOM 已就绪（已用
$(document).ready()保障）。
该方法简洁、语义清晰、零侵入——无需修改 HTML 结构，不强求 class 命名规范，是动态结构化内容区块的高效实践方案。
