jQuery API の has( selector ) は、マッチした要素のうち、selectorにマッチする子孫要素を持っている要素を、選択するメソッド。
記述方法
jQuery( セレクター1 ) . has( セレクター2 );
「セレクター1」にマッチした要素のうち、「セレクター2」にマッチする子孫要素を持っている要素を選択。
記述例
jQuery( '#smaple' ) . has( '.smaple-descendant' );
idが「smaple」である要素のうち、クラス名が「smaple-descendant」である子孫要素を持っている要素を選択。
実装例(サンプル)
セル | セル | セル |
セル | セル | セル |
セル | セル | セル |
セル | セル | セル |
セル | セル | セル |
実装例(サンプル)のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-api-has tr' ) . has( '.jquery-api-has-yellow' ) . css( {
backgroundColor: 'yellow',
color: 'red',
} );
jQuery( '#jquery-api-has tr' ) . has( '.jquery-api-has-pink' ) . css( {
backgroundColor: 'pink',
color: 'blue',
} );
jQuery( '#jquery-api-has tr' ) . has( 'span' ) . css( {
backgroundColor: 'lightblue',
color: 'red',
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-has tr' ) . has( '.jquery-api-has-yellow' ) . css( {
backgroundColor: 'yellow',
color: 'red',
} );
jQuery( '#jquery-api-has tr' ) . has( '.jquery-api-has-pink' ) . css( {
backgroundColor: 'pink',
color: 'blue',
} );
jQuery( '#jquery-api-has tr' ) . has( 'span' ) . css( {
backgroundColor: 'lightblue',
color: 'red',
} );
} );
// -->
</script>
HTML
<table id="jquery-api-has">
<tr>
<td class="jquery-api-has-yellow">セル</td>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
<td class="jquery-api-has-pink">セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td><span>セル</span></td>
<td>セル</td>
</tr>
</table>
<tr>
<td class="jquery-api-has-yellow">セル</td>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
<td class="jquery-api-has-pink">セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td><span>セル</span></td>
<td>セル</td>
</tr>
</table>