jQuery API の is( element ) は、マッチした要素が、さらに、「element」とマッチする場合、trueを返すメソッド。
記述方法
jQuery( セレクター ) . is( 要素 )
「セレクター」にマッチした要素が、「要素」に一致する場合、trueを返す。
記述例
jQuery( 'ol' ) . click( function ( event ) {
var eventTarget = jQuery( event.target );
if( eventTarget . is( 'li' ) ){
// クリックした要素がLI要素だった場合の処理。
}
} );
var eventTarget = jQuery( event.target );
if( eventTarget . is( 'li' ) ){
// クリックした要素がLI要素だった場合の処理。
}
} );
戻り値
- Boolean
booleanType（論理型）。
マッチした要素が、引数「element」とマッチする場合、「true」。
マッチした要素が、引数「element」とマッチしない場合、「false」。
実装例（サンプル）
12345678
実装例（サンプル）の動作について
- 偶数の数字をクリックすると、背景色を黄色にする。
- 奇数の数字をクリックすると、背景色を白色にする。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#sample' ) . click( function ( $event ) {
var $eventTarget = jQuery( $event.target );
if ( $eventTarget.is( 'b' ) ) {
jQuery( this ).css( "background-color", "yellow" );
}else{
jQuery( this ).css( "background-color", "white" );
}
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#sample' ) . click( function ( $event ) {
var $eventTarget = jQuery( $event.target );
if ( $eventTarget.is( 'b' ) ) {
jQuery( this ).css( "background-color", "yellow" );
}else{
jQuery( this ).css( "background-color", "white" );
}
} );
} );
// -->
</script>
HTML
<div id="sample">
<i>1</i><b>2</b><i>3</i><b>4</b><i>5</i><b>6</b><i>7</i><b>8</b>
</div>
<i>1</i><b>2</b><i>3</i><b>4</b><i>5</i><b>6</b><i>7</i><b>8</b>
</div>
CSS
<style>
<!--
#sample {
margin: 10px;
padding: 10px;
width: 500px;
border: solid 1px red ;
border-radius: 10px;
background-color: white;
}
#sample i,
#sample b {
margin: 10px;
font-size: 20px;
cursor: pointer;
}
-->
</style>
<!--
#sample {
margin: 10px;
padding: 10px;
width: 500px;
border: solid 1px red ;
border-radius: 10px;
background-color: white;
}
#sample i,
#sample b {
margin: 10px;
font-size: 20px;
cursor: pointer;
}
-->
</style>