THE HAM MEDIA BLOG

jQueryメモ:変数に入れた要素が・・・

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

変数に入れた要素が・・・

勉強がてらメモエントリー。jQueryで、こんな動作をするのかーと思ったので書いておきます。



要素が移動してしまうサンプル

今回の内容は.html()を使って要素の中身をコピーして表示させようとしたら、変数に入れた要素が表示先に移動してしまうという現象が起きた。

単純に考えたらミスで、単に指定が足りなかっただけなのですが、そんな動作になるなんてわかっていなかった自分。

何はともあれ、サンプルを見てください。

■サンプルHTML

<ul id="test0">
  <li class="test-id1">テスト1</li>
  <li class="test-id2">テスト2</li>
  <li class="test-id3">テスト3</li>
  <li class="test-id4">テスト4</li>
  <li class="test-id5">テスト5</li>
</ul>

<button id="btn1">$('ul#test1').html(arrange)</button>

<ul id="test1">
  <li>ul#test1の部分</li>
</ul>

■サンプルスクリプト

var arrange = $('#test0 li');
$('button#btn1').one('click',function(){
	$('ul#test1').html(arrange);
});

■サンプルデモ

  • テスト1
  • テスト2
  • テスト3
  • テスト4
  • テスト5
  • ul#test1の部分

真ん中のボタンをクリックしてみてください。どうなったのかわかりやすく色と高さをつけておきました。変数に要素だけを指定しておいて、.htmlでその変数を書き出すと、移動してしまうのですね。
それが一般的なのかわからないですが、自分はこの動作をしらなかったので・・・。

jQuery内の.html

ついでにjQuery1.3.2の内部の.html部分がどんな動作になるのか、スクリプトを見てみた。

jQuery.fn = jQuery.prototype = {
  html: function( value ) {
    return value === undefined ?
      (this[0] ?
        this[0].innerHTML.replace(/ jQuery\d+="(?:\d+|null)"/g, "") :
        null) :
      this.empty().append( value );
  }
};

上記のスクリプトは一部だけ表示してあります。ま、よくわかっていなかったりしますが…そもそもreplace自体の動作が、変数に表示させているhtmlを丸々格納しておくと、移動になるんだろうなーという理解でいいのでしょね。jQueryじゃなくて、JSの仕様ってことか。

移動ではなくコピーにしたい場合

じゃあ移動じゃなくて、コピーにしたい場合ってどうすればいいんだろう?なんて思ったのですが、単純に考えたら、変数に入れるときからhtmlを変数に入れればいいじゃないか〜なんて思ったので書いてみた。それだと予想通りに動作したのでそれもメモ。

■サンプルスクリプト

var arrange2 = $('ul#test2').html();
$('button#btn2').one('click',function(){
	$('ul#test3').html(arrange2);
});

コピーしたい要素にあらかじめ.html()をつけておき、そのhtmlを変数に格納しておく。そうすることで、.htmlで書き出したときに、移動ではなく、コピーされたように表示される。

■サンプルデモ

  • テスト1
  • テスト2
  • テスト3
  • テスト4
  • テスト5
  • ul#test3の部分

知らないこと多いなー

まだまだ自分自身の勉強は必要だということですね。もっと詳しくなりたいものです。

トップ画のソース

Cat or Alien?
Photographer
kaibara87
License
Creative Commons (by)


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

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

ホームページアドレス:

コメント: [必須入力]

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


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

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

トップに戻る

×

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