本文介绍如何使用 jQuery 的 nextUntil() 和 wrapAll() 方法，精准包裹相邻 标签之间的全部中间元素（如 、、 等），无需为内容元素添加任何 class，实现语义化、可维护的 DOM 结构封装。
本文介绍如何使用 jquery 的 `nextuntil()` 和 `wrapall()` 方法，精准包裹相邻 `
` 标签之间的全部中间元素（如 `
`、`
- `、`
` 等），无需为内容元素添加任何 class，实现语义化、可维护的 dom 结构封装。
在构建可折叠手风琴（Accordion）或分章节内容区块时，常需将每个标题（如 <h2></h2>）之后、下一个同级标题之前的所有 HTML 元素统一包裹进一个容器中（例如 <div class="section-content">）。若仅用 <code>.next()，只能选中紧邻的单个元素，无法处理多层混合内容——这正是原始代码失效的根本原因。
正确的解法是利用 jQuery 提供的 nextUntil(selector) 方法：它会从当前元素的下一个兄弟节点开始，持续收集后续兄弟节点，直到遇到匹配指定选择器（如 'h2'）的元素为止（但不包含该终止元素本身）。随后，再对这批元素调用 wrapAll()，即可一次性将其整体包裹进新容器。
以下是完整、健壮的实现代码：
$(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>');
}
});
});✅ 关键优势说明：
- ✅ 零侵入式：无需给
<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/gongju/2331" title="jQuery 1.12.4"><img src="https://img.php.cn/upload/manual/001/431/639/6a21619eac924328.png" alt="jQuery 1.12.4" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/gongju/2331" title="jQuery 1.12.4">jQuery 1.12.4</a> <p>jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。</p> </div> <a href="/xiazai/gongju/2331" title="jQuery 1.12.4" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>、<ul></ul>或<h3></h3>等内容元素添加任何 class 或 data 属性； - ✅ 语义清晰：完全依赖 HTML 标题层级（
h2作为节区锚点），符合无障碍与 SEO 最佳实践； - ✅ 容错性强：
$content.length > 0判断避免空包裹，防止生成无意义的空<div>； <li>✅ <strong>兼容任意结构</strong>：无论中间是纯文本段落、嵌套列表、子标题还是 iframe，均可一并捕获并包裹。</li> <p>⚠️ <strong>注意事项：</strong> </p> <ul> <li>确保目标标题标签（如 <code>h2）在 DOM 中为同级兄弟关系，且结构扁平（即不被其他非标题块级元素意外中断）； - 若页面中存在其他
h2（如页眉、侧边栏），建议限定作用域，例如使用$('.axxs-accordion > h2')替代$('.axxs-accordion h2')，防止深层嵌套误匹配； - 在使用
wrapAll()前，确保$content非空，否则可能引发静默失败或布局异常。
最终生成的 DOM 将形如：
<h2>Section with a Div and Mixed Content</h2> <div class="section-content"> <h3>Heading</h3> <p>Here is some content with text and a link.</p> <p><a href="#" target="_blank">Test link</a></p> </div> <h2>Section with a List</h2>
这一模式不仅适用于手风琴组件，还可拓展用于文档章节折叠、CMS 内容区块化、响应式手风琴 FAQ 等多种场景，是 jQuery 操作 DOM 结构的典型高效范式。
