jQuery | wrapAll() 与示例

简介

jQuery 的 wrapAll() 方法是一个很实用的方法，它允许您将一组 DOM 元素包装在单个元素内。

该方法将指定的 HTML 元素（或 HTML 字符串）插入到目标元素的开始和结尾标记之间，然后将目标元素移到新的包装器中。wrapAll() 方法只能包装一组元素一次，因此使用此方法时必须谨慎。

语法

wrapAll() 方法的语法如下所示：

$(selector).wrapAll(wrappingElement)

• selector：必需，用于定位目标元素的选择器。
• wrappingElement：必需，定义要插入的外包装元素。

示例

以下是一些使用 wrapAll() 方法的示例：

示例 1

下面的示例使用 wrapAll() 方法将一个 div 元素插入到所有 p 元素的开始和结束标记之间：

$("p").wrapAll("<div class='wrapper'></div>");

这会将所有 p 元素包装在一个名为 "wrapper" 的 div 元素内，如下所示：

<div class="wrapper">
  <p>第一个段落。</p>
  <p>第二个段落。</p>
  <p>第三个段落。</p>
</div>

示例 2

下面的示例使用 wrapAll() 方法将所有 div 元素包装在新的 div 元素中：

$("div").wrapAll("<div class='wrapper'></div>");

这会将所有 div 元素包装在一个名为 "wrapper" 的 div 元素内，如下所示：

<div class="wrapper">
  <div>第一个 div 元素。</div>
  <div>第二个 div 元素。</div>
  <div>第三个 div 元素。</div>
</div>

示例 3

下面的示例使用 wrapAll() 方法将所有表单元素包装在 div 元素中：

$(":input").wrapAll("<div class='wrapper'></div>");

这会将所有表单元素包装在一个名为 "wrapper" 的 div 元素内，如下所示：

<div class="wrapper">
  <input type="text" name="name" value="John">
  <input type="password" name="password" value="Doe">
  <input type="submit" value="Submit">
</div>

总结

wrapAll() 方法是一种非常有用的方法，它允许您将一组 DOM 元素包装在单个元素内。使用 wrapAll() 方法可以极大地简化您的代码，并使其更加易于阅读和维护。