jQuery | unwrap() 与示例

简介

在 jQuery 中，unwrap() 方法用于删除被选元素的父元素，从而使选定元素保持在原来的位置。如果被选元素没有父元素，则该方法不会产生任何效果。

语法

$(selector).unwrap();

参数

该方法不接受任何参数。

示例

HTML：

<div class="parent">
  <p>This is a paragraph inside a div with class "parent".</p>
</div>

JavaScript：

$(document).ready(function() {
  $(".parent p").unwrap();
});

解释：

上述代码将选定的 p 元素从父元素 div 中删除，并保持在原来的位置。因此，这段代码会将上面的 HTML 变成：

<p>This is a paragraph inside a div with class "parent".</p>

另一个示例：

<div class="wrapper">
  <div class="parent">
    <p>This is a paragraph inside a div with class "parent".</p>
  </div>
  <p>This is another paragraph.</p>
</div>

$(document).ready(function() {
  $(".parent").unwrap();
});

解释

上述代码将选定的 div 元素（class="parent"）从其父元素 div（class="wrapper"）中删除，并将其包含的 p 元素作为兄弟元素添加到仍然在 div（class="wrapper"）中的 p 元素之前。因此，这段代码会将上面的 HTML 变成：

<p>This is a paragraph inside a div with class "parent".</p>
<p>This is another paragraph.</p>

总结

unwrap() 方法可以方便地将选定元素从其父元素中分离出来。但是要小心使用，否则可能会破坏页面布局。