THE HAM MEDIA BLOG

jQuery:contents()で気づいたこと

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
javascript
contents()

jQuery:contents()で気づいたこと

以前のエントリーで、
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はすべてこれを使います。

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

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

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

◆サンプル1の出力

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

では次。

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

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

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

◆サンプル2の出力

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

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

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

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

◆サンプル3の出力

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

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

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

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

◆サンプル4の出力

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

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

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

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

◆サンプル5の出力

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

今回の驚き

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

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

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



この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。