jQuery API の html( function( index, oldhtml ) ) は、マッチした要素内に設定するHTMLコンテンツを、function関数で指定するメソッド。その際、インデックス番号と現在のHTMLコンテンツを引数として、function関数に引き渡すことができる。１つ目の引数が、インデックス番号。２つ目の引数が、現在のHTMLコンテンツ。
記述方法
jQuery( セレクター ) . html( function( インデックス番号, 現在のHTMLコンテンツ ) {
return 新たに設定するHTMLコンテンツ;
} );
return 新たに設定するHTMLコンテンツ;
} );
「セレクター」に指定した要素内のコンテンツを、「新たに設定するHTMLコンテンツ」に指定したHTMLコンテンツに設定。その際、インデックス番号と、現在のHTMLコンテンツを引き渡すことができる。
記述例
jQuery( '#jquery-sample' ) . html( function( index, oldHtml ) {
return oldHtml + '<span style="color: red;">（サンプル）</span>';
} );
return oldHtml + '<span style="color: red;">（サンプル）</span>';
} );
idが「jquery-sample」の要素内のHTMLコンテンツに、<span style="color: red;">（サンプル）</span>を付け加える。
実装例（サンプル）
赤
青
緑
実装例（サンプル）の動作について
赤 をクリックすると、★を追加し、赤 ★になる。２回クリックすると、★を２つ追加し、赤 ★★になる。３回クリックすると、★を３つ追加し、赤 ★★★になる。４回クリックすると、★をすべて削除し、赤に戻す。
青と緑も同様に、★を追加及び削除する。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-div > p' ) . toggle(
function () {
jQuery( this ) . html( function( index, oldHtml ) {
return oldHtml + '<span class="jquery-sample-favorite">★<span>';
} );
},
function () {
jQuery( this ) . html( function( index, oldHtml ) {
return oldHtml + '<span class="jquery-sample-favorite">★<span>';
} );
},
function () {
jQuery( this ) . html( function( index, oldHtml ) {
return oldHtml + '<span class="jquery-sample-favorite">★<span>';
} );
},
function () {
jQuery( '.jquery-sample-favorite', this ) . remove();
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-div > p' ) . toggle(
function () {
jQuery( this ) . html( function( index, oldHtml ) {
return oldHtml + '<span class="jquery-sample-favorite">★<span>';
} );
},
function () {
jQuery( this ) . html( function( index, oldHtml ) {
return oldHtml + '<span class="jquery-sample-favorite">★<span>';
} );
},
function () {
jQuery( this ) . html( function( index, oldHtml ) {
return oldHtml + '<span class="jquery-sample-favorite">★<span>';
} );
},
function () {
jQuery( '.jquery-sample-favorite', this ) . remove();
}
);
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample-div p {
text-align: center;
cursor: pointer;
}
.jquery-sample-red {
background-color: red;
color: white;
}
.jquery-sample-blue {
background-color: blue;
color: white;
}
.jquery-sample-green {
background-color: green;
color: white;
}
-->
</style>
<!--
#jquery-sample-div p {
text-align: center;
cursor: pointer;
}
.jquery-sample-red {
background-color: red;
color: white;
}
.jquery-sample-blue {
background-color: blue;
color: white;
}
.jquery-sample-green {
background-color: green;
color: white;
}
-->
</style>
HTML
<div id="jquery-sample-div">
<p class="jquery-sample-red"> 赤 </p>
<p class="jquery-sample-blue"> 青 </p>
<p class="jquery-sample-green"> 緑 </p>
</div>
<p class="jquery-sample-red"> 赤 </p>
<p class="jquery-sample-blue"> 青 </p>
<p class="jquery-sample-green"> 緑 </p>
</div>