0

我正在尝试使用 unwrap 来删除父元素。我正在关注文档，但它不起作用；我有这样的 HTML：测试 html

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

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

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

4

4 回答 4

1

要打开一个元素，它应该有一个父元素。您正在创建一个 DOM 片段并尝试解开它。但它没有父母。

说，有一些dom：

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

与父母到位展开就好了：

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();
});

这是小提琴

所以，如果你想移除外部跨度，你应该瞄准内部跨度，它会展开。

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

.unwrap() 移除匹配元素的父元素。因此，要打开内部跨度，您必须使用 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);

另一个小提琴

更新：

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

于 2016-07-03T06:25:41.753 回答
1

Unwrap 不适用于字符串，它适用于 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>

于 2016-07-03T06:47:58.357 回答
0

试着在unwrap下面点赞

var html = "<span><span>test html</span></span>"
html = $(html).unwrap();
$(html).unwrap();
于 2016-07-03T06:19:25.230 回答
0

该.unwrap()方法删除元素的父元素。

所以说，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>

于 2016-07-03T06:31:53.403 回答