jQuery包装与包裹元素

2,823字

12–18 分钟

jQuery包装与包裹元素是jQuery中重要的DOM元素操作方法，通过特定方法可将指定元素用其他HTML元素包裹起来，实现页面结构的灵活调整，满足不同的布局和样式需求。常用的jQuery包装与包裹元素方法包括wrap()、wrapAll()和wrapInner()，三种方法功能各有侧重，适用于不同的应用场景。

wrap()方法

语法

$(selector).wrap(wrapper);

wrap()方法的核心功能是为每个匹配到的元素单独包裹一层指定的HTML元素，即每个目标元素都会被一个独立的wrapper元素包裹，互不影响。其中wrapper参数可表示HTML字符串、DOM元素或jQuery对象，用于指定包裹元素的结构。

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>wrap()方法示例</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        .wrap-box { border: 1px solid #0066cc; padding: 10px; margin: 5px; }
    </style>
</head>
<body>
    <p>这是第一个段落</p>
    <p>这是第二个段落</p>
    <script>
        // 为每个p元素单独包裹一个div.wrap-box
        $("p").wrap("<div class='wrap-box'></div>");
    </script>
</body>
</html>

上述示例中，两个p元素会分别被一个带有wrap-box类的div元素包裹，每个div都是独立的，不会出现多个p元素共享一个包裹元素的情况，这是wrap()方法最显著的特点。

wrapAll()方法

语法

$(selector).wrapAll(wrapper);

wrapAll()方法与wrap()方法的核心区别在于，其会将所有匹配到的元素作为一个整体，用一个指定的wrapper元素统一包裹，而非为每个元素单独包裹。该方法适用于需要将多个元素整合到同一个容器中的场景。

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>wrapAll()方法示例</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        .wrap-all-box { border: 1px solid #ff6600; padding: 15px; margin: 10px 0; }
    </style>
</head>
<body>
    <span>第一个span元素</span>
    <span>第二个span元素</span>
    <span>第三个span元素</span>
    <script>
        // 将所有span元素作为一个整体，包裹在一个div.wrap-all-box中
        $("span").wrapAll("<div class='wrap-all-box'></div>");
    </script>
</body>
</html>

示例运行后，三个span元素会被同一个div.wrap-all-box包裹，形成一个统一的容器，所有span元素都处于该容器内部，这与wrap()方法的单独包裹逻辑形成明显区别。

wrapInner()方法

语法

$(selector).wrapInner(wrapper);

wrapInner()方法的作用是为每个匹配到的元素的内部内容包裹指定的wrapper元素，即包裹的是元素的子内容，而非元素本身。该方法常用于对元素内部文本、子元素进行样式或结构修饰。

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>wrapInner()方法示例</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        .wrap-inner-span { color: #ff0000; font-weight: bold; }
    </style>
</head>
<body>
    <div class="container">这是容器1的内部内容</div>
    <div class="container">这是容器2的内部内容</div>
    <script>
        // 为每个.container元素的内部内容包裹一个span.wrap-inner-span
        $(".container").wrapInner("<span class='wrap-inner-span'></span>");
    </script>
</body>
</html>

示例中，两个container类的div元素，其内部的文本内容会被span.wrap-inner-span包裹，div元素本身不会被包裹，仅内部内容发生结构变化，这是wrapInner()方法与前两种方法的核心差异。