jQuery API の text() は、マッチした要素内のテキストノードを取得するメソッド。マッチした全要素(子孫要素を含む)の各要素から、テキストノードを取得し結合した文字列を返す。
記述方法
jQuery( セレクター ) . text()
「セレクター」に指定した要素内のテキストノードを取得。
記述例
jQuery( '#jquery-sample' ) . text()
idが「jquery-sample」の要素内のテキストノードを取得。
実装例(サンプル)
赤
青
緑
一番好きな色:
実装例(サンプル)の動作について
赤 、 青 、 緑 のいづれかをクリックすると、「一番好きな色: 」の右側に、クリックした色を表示する。
実装例(サンプル)のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-div > span' ) . click( function () {
var str = jQuery( this ) . text();
jQuery( '#jquery-sample-text' ) . text( str );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-div > span' ) . click( function () {
var str = jQuery( this ) . text();
jQuery( '#jquery-sample-text' ) . text( str );
} );
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample-div span {
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 span {
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">
<span>
<span class="jquery-sample-red"> 赤 </span>
</span>
<span>
<span class="jquery-sample-blue"> 青 </span>
</span>
<span>
<span class="jquery-sample-green"> 緑 </span>
</span>
</div>
<p>一番好きな色: <span id="jquery-sample-text"></span></p>
<span>
<span class="jquery-sample-red"> 赤 </span>
</span>
<span>
<span class="jquery-sample-blue"> 青 </span>
</span>
<span>
<span class="jquery-sample-green"> 緑 </span>
</span>
</div>
<p>一番好きな色: <span id="jquery-sample-text"></span></p>