0

unwrap を使用して親要素を削除しようとしています。ドキュメントに従っていますが、機能しません。私はこのようなHtmlを持っています: test 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()メソッドは、要素の親を削除します。

つまり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 に答える