jQuery API の jQuery . contains( container, contained ) は、containedに指定したDOM要素が、containerに指定したDOM要素内にあるいるかどうかをチェックするメソッド。
引数
- container
DOM要素。
containedに指定したDOM要素を、含んでいるか、チェックしたいDOM要素。
- contained
DOM要素。
containerに指定したDOM要素に、含まれているかを、チェックしたいDOM要素。
戻り値
- Boolean
booleanType（論理型）。
containedに指定したDOM要素が、containerに指定したDOM要素内にあれば、「true」。
containedに指定したDOM要素が、containerに指定したDOM要素内になければ、「false」。
記述例
jQuery . contains(
jQuery( '#sample' ) . get( 0 ),
jQuery( '#sample-child' ) . get( 0 )
);
jQuery( '#sample' ) . get( 0 ),
jQuery( '#sample-child' ) . get( 0 )
);
idが「sample-child」であるDOM要素が、idが「sample」であるDOM要素内にあるいるかどうかをチェックする
jQuery . contains(
document . getElementById( 'sample' ),
document . getElementById( 'sample-child' )
);
document . getElementById( 'sample' ),
document . getElementById( 'sample-child' )
);
idが「sample-child」であるDOM要素が、idが「sample」であるDOM要素内にあるいるかどうかをチェックする
実装例（サンプル）
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
実装例（サンプル）の動作について
「jquery-sample-child-a」ボタンをクリックすると、ボタンの右横に、「含まれている」と5秒間表示し、「項目２」を5秒間点滅させる。
「jquery-sample-child-b」ボタンをクリックすると、ボタンの右横に、「含まれていない」と5秒間表示する。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-sample-button-a' ) . click(
function() {
jQuery( '#jquery-sample-button-a' ) . prop( 'disabled', true );
var flag = jQuery . contains( jQuery( '#jquery-sample' ) . get( 0 ), jQuery( '#jquery-sample-child-a' ) . get( 0 ) );
if( flag ) {
jQuery( '#jquery-sample-message-a' ) . text( '含まれている。' );
jQuery( '#jquery-sample-child-a' )
. fadeTo( 500, 0.25 ) . fadeTo( 500, 1 )
. fadeTo( 500, 0.25 ) . fadeTo( 500, 1 )
. fadeTo( 500, 0.25 ) . fadeTo( 500, 1 )
. fadeTo( 500, 0.25 ) . fadeTo( 500, 1 )
. fadeTo( 500, 0.25 ) . fadeTo( 500, 1 );
} else {
jQuery( '#jquery-sample-message-a' ) . text( '含まれていない。' );
}
setTimeout( function() {
jQuery( '#jquery-sample-message-a' ) . text( '' );
jQuery( '#jquery-sample-button-a' ) . prop( 'disabled', false );
}, 5000 );
}
);
jQuery( '#jquery-sample-button-b' ) . click(
function() {
jQuery( '#jquery-sample-button-b' ) . prop( 'disabled', true );
var flag = jQuery . contains( jQuery( '#jquery-sample' ) . get( 0 ), jQuery( '#jquery-sample-child-b' ) . get( 0 ) );
if( flag ) {
jQuery( '#jquery-sample-message-b' ) . text( '含まれている。' );
jQuery( '#jquery-sample-child-b' )
. fadeTo( 500, 0.25 ) . fadeTo( 500, 1 )
. fadeTo( 500, 0.25 ) . fadeTo( 500, 1 )
. fadeTo( 500, 0.25 ) . fadeTo( 500, 1 )
. fadeTo( 500, 0.25 ) . fadeTo( 500, 1 )
. fadeTo( 500, 0.25 ) . fadeTo( 500, 1 );
} else {
jQuery( '#jquery-sample-message-b' ) . text( '含まれていない。' );
}
setTimeout( function() {
jQuery( '#jquery-sample-message-b' ) . text( '' );
jQuery( '#jquery-sample-button-b' ) . prop( 'disabled', false );
}, 5000 );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button-a' ) . click(
function() {
jQuery( '#jquery-sample-button-a' ) . prop( 'disabled', true );
var flag = jQuery . contains( jQuery( '#jquery-sample' ) . get( 0 ), jQuery( '#jquery-sample-child-a' ) . get( 0 ) );
if( flag ) {
jQuery( '#jquery-sample-message-a' ) . text( '含まれている。' );
jQuery( '#jquery-sample-child-a' )
. fadeTo( 500, 0.25 ) . fadeTo( 500, 1 )
. fadeTo( 500, 0.25 ) . fadeTo( 500, 1 )
. fadeTo( 500, 0.25 ) . fadeTo( 500, 1 )
. fadeTo( 500, 0.25 ) . fadeTo( 500, 1 )
. fadeTo( 500, 0.25 ) . fadeTo( 500, 1 );
} else {
jQuery( '#jquery-sample-message-a' ) . text( '含まれていない。' );
}
setTimeout( function() {
jQuery( '#jquery-sample-message-a' ) . text( '' );
jQuery( '#jquery-sample-button-a' ) . prop( 'disabled', false );
}, 5000 );
}
);
jQuery( '#jquery-sample-button-b' ) . click(
function() {
jQuery( '#jquery-sample-button-b' ) . prop( 'disabled', true );
var flag = jQuery . contains( jQuery( '#jquery-sample' ) . get( 0 ), jQuery( '#jquery-sample-child-b' ) . get( 0 ) );
if( flag ) {
jQuery( '#jquery-sample-message-b' ) . text( '含まれている。' );
jQuery( '#jquery-sample-child-b' )
. fadeTo( 500, 0.25 ) . fadeTo( 500, 1 )
. fadeTo( 500, 0.25 ) . fadeTo( 500, 1 )
. fadeTo( 500, 0.25 ) . fadeTo( 500, 1 )
. fadeTo( 500, 0.25 ) . fadeTo( 500, 1 )
. fadeTo( 500, 0.25 ) . fadeTo( 500, 1 );
} else {
jQuery( '#jquery-sample-message-b' ) . text( '含まれていない。' );
}
setTimeout( function() {
jQuery( '#jquery-sample-message-b' ) . text( '' );
jQuery( '#jquery-sample-button-b' ) . prop( 'disabled', false );
}, 5000 );
}
);
} );
// -->
</script>
CSS
<style>
<!--
#jquery-sample li {
color: #333333;
list-style-type: square;
}
-->
</style>
<!--
#jquery-sample li {
color: #333333;
list-style-type: square;
}
-->
</style>
HTML
<p>
<button id="jquery-sample-button-a">jquery-sample-child-a</button> <span id="jquery-sample-message-a"></span>
</p>
<p>
<button id="jquery-sample-button-b">jquery-sample-child-b</button> <span id="jquery-sample-message-b"></span>
</p>
<ul id="jquery-sample">
<li>項目１</li>
<li id="jquery-sample-child-a">項目２</li>
<li>項目３</li>
<li>項目４</li>
<li>項目５</li>
</ul>
<button id="jquery-sample-button-a">jquery-sample-child-a</button> <span id="jquery-sample-message-a"></span>
</p>
<p>
<button id="jquery-sample-button-b">jquery-sample-child-b</button> <span id="jquery-sample-message-b"></span>
</p>
<ul id="jquery-sample">
<li>項目１</li>
<li id="jquery-sample-child-a">項目２</li>
<li>項目３</li>
<li>項目４</li>
<li>項目５</li>
</ul>