第2回 属性＆コンテンツ編：連載：jQuery逆引きリファレンス（5/19 ページ）

[山田祥寛（http://www.wings.msn.to/），著]

連載目次

　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属性が設定され、正しく画像が表示されていることが確認できます。