jQuery的wrap()方法介绍

简介

jQuery的wrap()方法可以将一组DOM元素包装在另一个DOM元素中。我们可以使用wrap()方法来添加外部包装器或替换每个元素的父节点。

语法

$(selector).wrap(wrapper);

参数说明：

• selector：必需，要包装的元素。
• wrapper：必需，指定要插入的包装元素。

示例

1. 使用wrap()添加外部包装器

我们首先定义一个HTML文档：

<div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

现在，我们将使用wrap()方法将所有元素包装在外部div元素中：

$("div.box1, div.box2, div.box3").wrap("<div class='wrapper'></div>");

然后，生成的HTML代码将变为：

<div class="container">
    <div class="wrapper">
        <div class="box1"></div>
    </div>
    <div class="wrapper">
        <div class="box2"></div>
    </div>
    <div class="wrapper">
        <div class="box3"></div>
    </div>
</div>

2. 使用wrap()替换每个元素的父节点

再次定义一个HTML文档：

<div class="container">
    <div class="child"></div>
</div>

现在，我们将使用wrap()方法将子元素"child"移到外部div元素的同级元素：

$(".child").wrap("<div class='container'></div>").parent().unwrap();

然后，生成的HTML代码将变为：

<div class="container"></div>
<div class="child"></div>

现在，我们使用parent()方法在子元素上获取父元素，然后使用unwrap()方法将子元素从父元素中移除，最终生成了我们预期的HTML代码。

总结

wrap()方法是一个非常有用的方法，用于将一组DOM元素包装在另一个DOM元素中。它可以用于添加外部包装器或替换每个元素的父节点。熟练掌握该方法可以提高我们的开发效率。