📌  相关文章
📜  jQuery | wrapAll() 与示例(1)

📅  最后修改于: 2023-12-03 15:16:47.725000             🧑  作者: Mango

jQuery | wrapAll() 与示例

简介

jQuery | wrapAll() 方法将一个指定的 HTML 内容（包括文本节点）包装在每个匹配元素的外面，仅为匹配的元素包裹一次。通俗地说，wrapAll() 可以通过指定包裹内容，为多个 DOM 元素（如多个 div）同时添加相同的包裹元素（如同一个 div）。

语法
$(selector).wrapAll(wrapper)

参数说明：

  • selector：必需。规定被选元素的一个或多个选择器。如果包含了多个选项，则基于它们的父级元素进行包裹。
  • wrapper：必需。规定 HTML 内容或一个函数用于生成 HTML 内容。
示例

下面的示例展示了如何使用 wrapAll() 包装多个 div 元素：

<html>
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="wrap-me"></div>
    <div class="wrap-me"></div>
    <div class="wrap-me"></div>
    <script>
        $('.wrap-me').wrapAll('<div class="wrapper"></div>');
    </script>
</body>
</html>

在这个示例中，我们首先定义了三个类名为“wrap-me”的 div 元素。接着，我们使用 wrapAll() 方法将这三个 div 包装在一个新的 div 元素中，这个新的 div 元素包含一个类名为“wrapper”。最终，我们会在浏览器中看到一个包含三个 div 元素的组合块。

示例解析

我们可以看到，通过指定包裹元素 '

'作为参数，jQuery 会查找所有具有相同类名为 "wrap-me" 的元素，并将它们全部包装在指定的包裹元素中。

可以使用 wrapAll() 方法来动态地从页面中移动元素，并将它们包装在一个新的父元素中。此外，此方法也可用于在每个匹配元素的外部生成指定的 HTML 内容（或使用包含回调函数的函数）。

总结

wrapAll() 是 jQuery 中非常实用的方法之一。它可用于将指定 HTML 内容包装在一组元素的外面。大部分时候，这将有助于简化代码并提高速度。在大型项目中，为多个元素（如 div）添加相同的包裹元素（如同一个 div）时，该方法特别有用。