jQuery | unwrap() 与示例

在 jQuery 中，当我们需要移除一个元素的父元素并将其与其父级元素平级时，可以使用 unwrap() 方法。这个方法将移除父级元素并将其子元素移动到原本父级元素的位置上。如果父级元素有多个同级元素，则只有包含指定元素的最外层元素才会被移除。

语法

$(selector).unwrap();

示例

HTML 代码

<div class="wrapper">
  <div class="inner">Inner Div</div>
</div>

JavaScript 代码

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

描述

在上面的示例中，我们首先选择了包含有 .inner 类名的元素，然后调用 unwrap() 方法将其父级元素（即包含有 .wrapper 类名的元素）移除，最终 .inner 元素被直接放置在原本父级元素（即 body 元素）之下。

HTML 代码

<div class="wrapper">
  <div class="outer">
    <!-- This is outer div -->
    <div class="inner">Inner Div</div>
  </div>
  <div class="other">Other Div</div>
</div>

JavaScript 代码

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

描述

在这个示例中，我们同样选择了包含有 .inner 类名的元素，然后调用 unwrap() 方法将其父级元素（即包含有 .outer 类名的元素）移除，最终 .inner 元素被直接放置在原本父级元素（即 .wrapper 元素）之下。需要注意的是，由于 .wrapper 元素中还有其他同级元素，因此这些元素并没有被影响到，仅仅 .outer 元素被移除。

总结

使用 jQuery 的 unwrap() 方法可以方便地将元素从父级元素中解除并放置在同一层级，从而实现对 HTML 结构的修改。需要注意的是，如果父级元素有多个同级元素，则只有最外层的包含指定元素的元素会被移除。