連載
» 2010年02月12日 00時00分 公開

連載:jQuery逆引きリファレンス:第4回 要素の操作&ユーティリティ編 (5/19)

[山田祥寛(http://www.wings.msn.to/),著]



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 現在の要素セット(カレント要素)を指定された要素で置き換えるには、replaceWithメソッドを使います。引数には、置き換え後の要素を表す文字列、またはDOM Elementオブジェクトを指定します。

 以下は、画像をクリックしたタイミングで、画像をそのalt属性を表すテキストで置き換える例です。

<script type="text/javascript">

$(function() {

  // <li>要素直下の<img>要素をクリックしたときの挙動
  $('li > img').click(function() {

    // クリックした<img>要素を<span>要素で置換
    $(this).replaceWith('<span>'
       + $(this).attr('alt') + '</span>'); // テキスト値はalt属性
  });
});

</script>

  ……中略……

<ul>
  <li><img src="http://www.wings.msn.to/books/978-4-7980-2401-1/978-4-7980-2401-1_logo.jpg" alt="ASP.NET MVC実践プログラミング" /></li>
  <li><img src="http://www.wings.msn.to/books/978-4-7981-1957-1/978-4-7981-1957-1_logo.jpg" alt="10日でおぼえるASP.NET入門教室" /></li>
  <li><img src="http://www.wings.msn.to/books/978-4-8399-2708-0/978-4-8399-2708-0_logo.jpg" alt="JavaScriptマスターブック" /></li>
</ul>

リスト064 画像クリック時に、画像をそのalt属性を表すテキストで置き換え(ReplaceWith.htm)
このHTMLを実際にブラウザで開く


ブラウザで開く


先頭の画像をクリック

リスト064の実行結果
画像をクリックすると、対応するテキストで置き換えられる

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。