第2回 属性＆コンテンツ編：連載：jQuery逆引きリファレンス（5/19 ページ）
要素セットに含まれる要素本体や属性、スタイルを取得／設定するためのメソッドについてまとめた、すぐに役立つ18本を一挙公開。
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>
このHTMLを実際にブラウザで開く
<img>要素にはid属性がセットされているだけですが、attr(name, fnc)メソッドによって動的にsrc属性が設定され、正しく画像が表示されていることが確認できます。
Copyright© Digital Advantage Corp. All Rights Reserved.