THE HAM MEDIA BLOG

以前のエントリーで、
「jQueryメモ：親要素だけ消すってどうやるんだろう？」
というのをエントリーしたのですが、
cyokodogさんから別な方法も教えてもらいました。

そこでcontents()というjQueryの関数を使っていたのですが、
after()と一緒に使うと、「こんな風になるのか！？」
と驚いたというか、動作について勘違いしていたことに気づきました。
メモのためにエントリーしておきます。

いろいろなサンプルで見てみる

とりあえずafter()のみの動作をみてみましょう。

◆サンプルHTML

<p><a href="#"><span>ダミーテキスト</span></a></p>
<p><a href="#"><span>ダミーテキスト</span></a></p>
<p><a href="#"><span>ダミーテキスト</span></a></p>

今回のHTMLはすべてこれを使います。

◆サンプル１のスクリプト

まずはafterでテキストを表示するようにしてみる

$('.preview.test1 a').each(function(){
  $(this).after('ダミー出力');
});

◆サンプル１の出力

結果をみてわかるように、指定した要素の後ろにテキストが表示される。

では次。

◆サンプル２のスクリプト

次に、指定した要素(今回はa要素)の中身を
after()で指定してみる。

$('.preview.test2 a').each(function(){
  $(this).after($(this).html());
});

◆サンプル２の出力

これも単に中身と同じものを指定要素の後ろに表示。

◆サンプル３のスクリプト

今回の驚きはこれ。
contents()も中身を指し示しているのだろうと思って指定してみた。

$('.preview.test3 a').each(function(){
  $(this).after($(this).contents());
});

◆サンプル３の出力

あれ？中身が指定したa要素の後ろに移動してしまった。
複製じゃなくて移動になってしまった！！
contents()の動作ってこういうのだったのですね。

◆サンプル４のスクリプト

ちなみにサンプル２に一つ加えて、
指定要素は消すようにしてみた。

$('.preview.test4 a').each(function(){
  $(this).after($(this).html());
  $(this).remove();
});

◆サンプル４の出力

これもサンプル３と同じような出力になった(実際は少し違うが)

◆サンプル５のスクリプト

おまけでもう一つ、前回作ったスクリプトも試した。

$('.preview.test5 a').each(function(){
  $(this).replaceWith($(this).html());
});

◆サンプル５の出力

指定した要素のみを削除して、
中身はそのままのスクリプトになっている。

今回の驚き

仕組みまではわからないけど、
$(this).after($(this).contents());の指定で
thisにあたる要素から中身を抜き出して、
thisの要素の外に移動させるようです。
あと、after()じゃなくてもbefore()でも同じように、
thisの中身をthisの前に移動という動作でした。

これにサンプル４と同じように、$(this).remove();を指定すると、
指定した要素を削除することができるようです。

うーむ、こんな動作だったとは。
これでまた一つ勉強になりました。