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