jQuery API の is( function( index ) ) は、マッチした要素が、function関数の戻り値とマッチする場合、trueを返すメソッド。インデックス番号を、引数として、function関数に引き渡すことができる。
記述方法
jQuery( セレクター ) . is( function( インデックス番号 ) {
return 条件;
} );
return 条件;
} );
「セレクター」にマッチした要素が、「条件」に一致する場合、trueを返す。インデックス番号を、引数として、引き渡すことができる。
記述例
jQuery( '#jquery-smaple' ) . is( function( index ) {
return jQuery( this ) . text() == 'サンプル';
} );
return jQuery( this ) . text() == 'サンプル';
} );
idが「jquery-smaple」である要素内のテキストノードが、「サンプル」である場合、trueを返す。
実装例（サンプル）
選択：
| セルＡ | セルＢ | セルＡ |
| セルＣ | セルＡ | セルＣ |
| セルＢ | セルＣ | セルＡ |
| セルＢ | セルＣ | セルＣ |
| セルＡ | セルＢ | セルＢ |
実装例（サンプル）の動作について
「セルＡ」を選択すると、「セルＡ」というテキストノードを持つセルの背景色だけを、ピンク色にする。
「セルＢ」を選択すると、「セルＢ」というテキストノードを持つセルの背景色だけを、ピンク色にする。
「セルＣ」を選択すると、「セルＣ」というテキストノードを持つセルの背景色だけを、ピンク色にする。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( 'input[name=jquerySampleRadio]' ) . change( function () {
jQuery( 'input[name=jquerySampleRadio]' ) . closest( 'label' ) . css( {
backgroundColor: 'lightgray',
} );
jQuery( 'input:checked[name=jquerySampleRadio]' ) . closest( 'label' ) . css( {
backgroundColor: 'pink',
} );
jQuery( '#jquery-smaple-table td' ) . click();
} ) . change();
jQuery( '#jquery-smaple-table td' ) . click( function () {
var jquerySmapleIs = jQuery( this ) . is( function() {
return jQuery( this ) . text() == jQuery( 'input:checked[name=jquerySampleRadio]' ) . val();
} );
if( jquerySmapleIs ) {
jQuery( this ) . css( 'backgroundColor', 'pink' );
} else {
jQuery( this ) . css( 'backgroundColor', 'white' );
}
} ) . click();
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( 'input[name=jquerySampleRadio]' ) . change( function () {
jQuery( 'input[name=jquerySampleRadio]' ) . closest( 'label' ) . css( {
backgroundColor: 'lightgray',
} );
jQuery( 'input:checked[name=jquerySampleRadio]' ) . closest( 'label' ) . css( {
backgroundColor: 'pink',
} );
jQuery( '#jquery-smaple-table td' ) . click();
} ) . change();
jQuery( '#jquery-smaple-table td' ) . click( function () {
var jquerySmapleIs = jQuery( this ) . is( function() {
return jQuery( this ) . text() == jQuery( 'input:checked[name=jquerySampleRadio]' ) . val();
} );
if( jquerySmapleIs ) {
jQuery( this ) . css( 'backgroundColor', 'pink' );
} else {
jQuery( this ) . css( 'backgroundColor', 'white' );
}
} ) . click();
} );
// -->
</script>
CSS
<style>
<!--
#jquery-smaple-form label {
margin: 5px 10px;
padding: 0 10px 0 5px;
background-color: yellow;
font-size: 15px;
color: #303030;
cursor: pointer;
border-radius: 5px;
}
#jquery-smaple-form label input {
margin: 5px;
cursor: pointer;
}
-->
</style>
<!--
#jquery-smaple-form label {
margin: 5px 10px;
padding: 0 10px 0 5px;
background-color: yellow;
font-size: 15px;
color: #303030;
cursor: pointer;
border-radius: 5px;
}
#jquery-smaple-form label input {
margin: 5px;
cursor: pointer;
}
-->
</style>
HTML
<p id="jquery-smaple-form">選択：
<label>
<input type="radio" name="jquerySampleRadio" value="セルＡ" checked="checked" />
セルＡ
</label>
<label>
<input type="radio" name="jquerySampleRadio" value="セルＢ" />
セルＢ
</label>
<label>
<input type="radio" name="jquerySampleRadio" value="セルＣ" />
セルＣ
</label>
</p>
<table id="jquery-smaple-table">
<tr>
<td>セルＡ</td>
<td>セルＢ</td>
<td>セルＡ</td>
</tr>
<tr>
<td>セルＣ</td>
<td>セルＡ</td>
<td>セルＣ</td>
</tr>
<tr>
<td>セルＢ</td>
<td>セルＣ</td>
<td>セルＡ</td>
</tr>
<tr>
<td>セルＢ</td>
<td>セルＣ</td>
<td>セルＣ</td>
</tr>
<tr>
<td>セルＡ</td>
<td>セルＢ</td>
<td>セルＢ</td>
</tr>
</table>
<label>
<input type="radio" name="jquerySampleRadio" value="セルＡ" checked="checked" />
セルＡ
</label>
<label>
<input type="radio" name="jquerySampleRadio" value="セルＢ" />
セルＢ
</label>
<label>
<input type="radio" name="jquerySampleRadio" value="セルＣ" />
セルＣ
</label>
</p>
<table id="jquery-smaple-table">
<tr>
<td>セルＡ</td>
<td>セルＢ</td>
<td>セルＡ</td>
</tr>
<tr>
<td>セルＣ</td>
<td>セルＡ</td>
<td>セルＣ</td>
</tr>
<tr>
<td>セルＢ</td>
<td>セルＣ</td>
<td>セルＡ</td>
</tr>
<tr>
<td>セルＢ</td>
<td>セルＣ</td>
<td>セルＣ</td>
</tr>
<tr>
<td>セルＡ</td>
<td>セルＢ</td>
<td>セルＢ</td>
</tr>
</table>