第2回 属性&コンテンツ編連載:jQuery逆引きリファレンス(5/19 ページ)

» 2009年11月13日 00時00分 公開



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

連載目次


 attr(name, fnc)メソッドを利用することで、属性値をコールバック関数fncの戻り値によって動的に設定することができます。

 やや変わり種のメソッドですが、ある属性値をほかの属性値、またはテキストなどから動的に生成したいようなケースで利用するとよいでしょう*

* 属性値が固定で決まる場合には、attr(name, value)やattr(props)メソッドを優先して利用するべきです。


 コールバック関数の引数には、要素セット(jQueryオブジェクト)の中のインデックス番号が、また、thisキーワードには現在処理中の要素が渡されますので、これらの情報を利用して属性値を生成します。生成された属性値は、コールバック関数の戻り値として返す必要があります。

 例えば以下は、<img>要素のsrc属性を、対応するid属性の値から生成する例です。ここではsrc属性は、

http://www.wings.msn.to/books/<id値>/<id値>_logo.jpg

の形式で決まるものとします。

<script type="text/javascript">

$(function() {
  $('li > img').attr(
    'src',
    function(index) {
        return "http://www.wings.msn.to/books/"
                 + this.id + "/" + this.id + "_logo.jpg";
    }
  );
});

</script>

……中略……

<ul>
  <li><img id="978-4-7980-2401-1" /></li>
  <li><img id="978-4-7981-1957-1" /></li>
  <li><img id="978-4-8399-2708-0" /></li>
</ul>

リスト031 id値を基に<img>要素のsrc属性を設定(AttrFuncSet.html)
このHTMLを実際にブラウザで開く


ブラウザで開く

リスト031の実行結果

 <img>要素にはid属性がセットされているだけですが、attr(name, fnc)メソッドによって動的にsrc属性が設定され、正しく画像が表示されていることが確認できます。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

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

メールマガジン登録

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