jQuery 解包不起作用

Question

我正在尝试使用展开来删除父元素。我正在按照文档进行操作，但它不起作用；我有 Html 像这样：测试 html

我写了这个函数来克隆和解包它：

var htmlTemplate = $('#htmlTemplate').clone().removeAttr('id').unwrap();

当我运行这段代码时，模板上仍然有外部跨度。有谁知道如何正确打开它？

Answer 1

尝试unwrap如下

var html = "<span><span>test html</span></span>"
html = $(html).unwrap();
$(html).unwrap();

Answer 2

要展开一个元素，它应该有一个 parent。您正在创建一个 DOM 片段并试图打开它。但是它没有 parents.

说，有一些 dom:

<button>unwrap</button>
<div class="outer"></div>

有了 parent 就位展开就可以了：

var inner = '<span class="inner">test html</span>',
        $outer = $('.outer');

// First you would want your element to get a parent.
$outer.html(inner);


// Then unwrap it
$('button').on('click', function() {
    $('.inner').unwrap();
});

这是fiddle

因此，如果您想移除外部跨度，您应该瞄准内部跨度，它会展开。

更新片段： .clone() 不复制任何 parents 它只复制元素及其所有后代。因此，当您使用克隆时 - 您会在 selected 元素处构建一个带有根的单独片段。

.unwrap() 删除匹配元素的 parent(s)。所以要打开内部跨度，你必须 select 用 jQuery.

<div class="outer"></div>

js

var html = "<span><span class='inner'>test html </span></span>";

var $html = $(html);

var unwraped = $html.find('.inner').unwrap();

$('.outer').html(unwraped);

另一个fiddle

更新：

遍历DOM和修改它是有区别的。当您使用 .find() - 您正在遍历（从一个元素移动到另一个元素）。 DOM 树的结构保持不变。当您使用 .unwrap() - 您正在改变结构（从 DOM 中删除一个元素）。

Answer 3

The .unwrap() method removes the element's parent.

也就是说，span必须是一个元素。

var gameOfThronesChars = $('p'); // Create an element.

$( "button" ).click(function() {
  if ( gameOfThronesChars.parent().is( "div" ) ) {
    gameOfThronesChars.unwrap();
  } else {
    gameOfThronesChars.wrap( "<div></div>" );
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


<style type="text/css">
  div {
    border: 2px solid #c00;
  }
</style>

<button>Wrap/Unwrap</button>

<p>Tyrion Lannister</p>
<p>Cersei Lannister</p>
<p>Sansa Stark</p>
<p>Arya Stark</p>

Answer 4

解包不适用于字符串，它对 DOM 元素有效。

.unwrap() 方法删除元素的父元素。这实际上是 .wrap() 方法的逆过程。匹配的元素（和它们的兄弟姐妹，如果有的话）在 DOM 结构中替换它们的父元素。

更多详情：https://api.jquery.com/unwrap/

var html = $('span'); 
html.unwrap('span');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<p id="html">
  <span><span>test html </span></span>
<p>

jQuery 解包不起作用

jQuery unwrap is not working

jquery

html

unwrap