jQuery 的包裹方法用于为匹配元素添加外层 / 内层包裹容器（修改 DOM 结构），核心包含 wrap、unwrap、wrapAll、wrapInner 四类方法，常用于批量修改元素结构、美化样式、分组元素等场景，下面将通过代码示例逐一讲解。
用于为每个匹配的元素分别包裹一层指定的容器（每个元素都有独立的外层）。语法：
$(目标元素).wrap(包裹容器)参数：
html：HTML 字符串（如 <div class="wrapper"></div>）。
ele：DOM 元素 /jQuery 对象。
fn(index)：回调函数，返回要包裹的容器（index为元素索引）。
示例：
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>运行代码：
$('.inner').wrap('<div class=\'wrap\'></div>')将所有类为 inner 的元素包裹到 <div class='wrap'></div> 元素中，效果如下：
<div class="container">
<div class="wrap"><div class="inner">Hello</div></div>
<div class="wrap"><div class="inner">Goodbye</div></div>
</div>用于移除匹配元素的直接父容器（wrap的反向操作），注意：不会移除 <body>/<html> 等根元素。语法：
$(目标元素).unwrap()示例：
<div class="container">
<div class="wrap"><div class="inner">Hello</div></div>
<div class="wrap"><div class="inner">Goodbye</div></div>
</div>运行代码：
$('.inner').unwrap()将移除所有类为 inner 元素的直接父容器，效果如下图：
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>用于将所有匹配的元素包裹在同一个容器中（所有元素共享一个外层，区别于 wrap的“每个独立包裹”）。语法：
$(目标元素).wrapAll(包裹容器)参数：
html：HTML 字符串（如 <div class="wrapper"></div>）。
ele：DOM 元素 /jQuery 对象。
fn(index)：回调函数，返回要包裹的容器（index为元素索引）。
示例：
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>运行代码：
$('.inner').wrapAll('<div class=\'wrap\'></div>')将所有类为 inner 的元素全部包裹在同一个 <div class='wrap'></div> 元素中，效果如下：
<div class="container">
<div class="wrap">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
</div>为每个匹配元素的内部内容包裹一层容器（包裹子内容，而非元素本身）。语法：
$(目标元素).wrapInner(包裹容器)参数：
html：HTML 字符串（如 <div class="wrapper"></div>）。
ele：DOM 元素 /jQuery 对象。
fn(index)：回调函数，返回要包裹的容器（index为元素索引）。
示例：
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>运行代码：
$('.inner').wrapInner('<div class=\'wrap\'></div>')将所有类为 inner 的元素的内容使用 <div class='wrap'></div> 进行包裹，效果如下：
<div class="container">
<div class="inner"><div class="wrap">Hello</div></div>
<div class="inner"><div class="wrap">Goodbye</div></div>
</div>下面示例通过“点击自己动手试一试”可以尝试各种方法的效果：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQeury 教程</title>
<!-- 引入 jQuery 库 -->
<script type="text/javascript" src="https://www.hxstrive.com/cdn/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 引入 loglevel 库，方便在 DOM 中打印日志 -->
<script src="https://www.hxstrive.com/preview_code/libs/custom_loglevel.js"></script>
<style>
button { background: #EEE !important; border: 1px solid #ccc !important;
min-width: 40px; padding: 5px; margin: 5px; cursor: pointer; }
h3 { font-size: 18px; }
.container { border: 1px solid blue; padding: 10px; }
.inner { border: 1px solid red; padding: 10px; margin: 5px; }
.wrap { box-shadow: inset 0 0 3px green; padding: 5px; margin: 5px; }
</style>
</head>
<body>
<div class="app">
<h3>包裹</h3>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
</div>
<div>
<!-- wrap(html|ele|fn) 把所有匹配的元素用其他元素的结构化标记包裹起来 -->
<button type="button" onclick="
// 将 class 为 inner 的元素包裹在 class 为 wrap 的 div 中
$('.inner').wrap('<div class=\'wrap\'></div>');
">wrap(html|ele|fn)</button>
<!-- unwrap() 这个方法将移出元素的父元素 -->
<button type="button" onclick="
// 移除 class 为 inner 的元素的所有父级元素
$('.inner').unwrap();
">unwrap()</button>
<!-- wrapAll(html|ele) 将所有匹配的元素用单个元素包裹起来 -->
<button type="button" onclick="
// 将所有 class 为 inner 的元素包裹在同一个 div 中
$('.inner').wrapAll('<div class=\'wrap\'></div>');
">wrapAll(html|ele)</button>
<!-- wrapInner(html|ele|fn) 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来 -->
<button type="button" onclick="
// 将每个 class 为 inner 的元素的内容包裹在 div 中
$('.inner').wrapInner('<div class=\'wrap\'></div>');
">wrapInner(html|ele|fn)</button>
</div>
</body>
</html>更多关于 jQuery 的知识请阅读后续教程。
川公网安备51010802032098