jQuery API の attr( attributeName, function( [index][, oldValue] ) ) は、「attributeName」に指定した属性の値を関数で設定するメソッド。インデックス番号と現在の属性値を、関数に引き渡すことができる。１つ目の引数が、インデックス番号。２つ目の引数が、現在の属性値。
記述方法
jQuery( 'セレクター' ) . attr( '属性名', function( インデックス, 現在の属性値 ) ) {
return 新しい属性値;
} );
return 新しい属性値;
} );
「セレクター」に指定した要素の「属性名」に指定した属性の値を、function関数で設定する。その際、「セレクター」に指定した要素の、インデックス番号と、「属性名」に指定した属性の現在の値を、function関数に引き渡すことができる。
実装例（サンプル）
- 項目１
- 項目２
- 項目３
実装例（サンプル）の動作について
「属性値変更」ボタンをクリックすると、「項目１」を赤色に、「項目２」を青色に、「項目３」を緑色にする。
「属性値変更」ボタンを再度クリックすると、すべての項目を灰色に戻す。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . toggle(
function() {
jQuery( '#jquery-sample-ul li' ) . attr( 'class', function( index, oldValue ) {
return oldValue + '-' + index;
} );
},
function() {
jQuery( '#jquery-sample-ul li' ) . attr( 'class', 'jquery-sample-li' );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . toggle(
function() {
jQuery( '#jquery-sample-ul li' ) . attr( 'class', function( index, oldValue ) {
return oldValue + '-' + index;
} );
},
function() {
jQuery( '#jquery-sample-ul li' ) . attr( 'class', 'jquery-sample-li' );
}
);
} );
// -->
</script>
CSS
<style>
<!--
.jquery-sample-li {
color: gray;
}
.jquery-sample-li-0 {
color: red;
}
.jquery-sample-li-1 {
color: blue;
}
.jquery-sample-li-2 {
color: green;
}
-->
</style>
<!--
.jquery-sample-li {
color: gray;
}
.jquery-sample-li-0 {
color: red;
}
.jquery-sample-li-1 {
color: blue;
}
.jquery-sample-li-2 {
color: green;
}
-->
</style>
HTML
<p>
<button id="jquery-sample-button">属性値変更</button>
</p>
<ul id="jquery-sample-ul">
<li class="jquery-sample-li">項目１</li>
<li class="jquery-sample-li">項目２</li>
<li class="jquery-sample-li">項目３</li>
</ul>
<button id="jquery-sample-button">属性値変更</button>
</p>
<ul id="jquery-sample-ul">
<li class="jquery-sample-li">項目１</li>
<li class="jquery-sample-li">項目２</li>
<li class="jquery-sample-li">項目３</li>
</ul>