デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

jQuery.contains( )要素が含まれているかをチェック

構文

要素が含まれているかをチェック返値:true/false
jQuery.contains( 対象の要素 ,含まれているか調べたい要素 )ver1.4〜
※要素はDOM要素で指定します。jQueryオブジェクトは利用できません。

機能

jQuery.containsメソッドは第1引数に指定した要素の中に、第2引数で指定した要素が含まれているかをチェックします。含まれていたらtrue、含まれていなかったらfalseを返します。

引数に設定する要素はDOM要素です。jQueryオブジェクトは利用できないので注意してください。

解説

要素が含まれているかをチェックする

サンプル(contains/01.html)を開いてbody内にdiv要素とbutton要素があることを確認して下さい。div要素にはid属性にsampleと設定しています。

<body>
	<button>click</button>
	<div id="sample">sample</div>
</body>

jQueryは以下の様に記述され、buttonをクリックするとjQuery.containsメソッドを利用して、body要素内にsampleのid属性を持つ要素がないかチェックします。チェックした結果は変数chkに代入しアラートで表示します。

$("button").click(function(){
 var chk = $.contains(document.body, document.getElementById("sample"));
 alert(chk);
});

body要素内にsampleのid属性を持つ要素は存在するため、buttonをクリックするとアラートで「true」と表示されます。ついでに存在しない場合のサンプルも作成しました。サンプル(contains/01b.html)を開いてcontains/01.htmlとはほとんど同じで、異なるのは以下の様に第2引数に設定した要素だけです。

$("button").click(function(){
 var chk = $.contains(document.body, document.getElementById("test"));
 alert(chk);
});

body要素内に「test」のid属性を持った要素は存在しないので、buttonをクリックするとアラートで「false」と表示されます。

メモ

hasとの使い分けは?

セレクタの:has( )やTraversingのhasメソッドも似ていますが、これらは特定の要素も持つ「要素を選択」します。trueやfalseを返すわけではないので、チェックするjQuery.containsメソッドとは使い道は異なります。

特定のテキストが含まれるかはチェックできません

jQuery.containsメソッドは要素が含まれるかしかチェックできません。テキストをチェックしたい場合はtextメソッドを利用して要素内のテキストを取得しif文と正規表現などでチェックしてください。

なぜ引数にjQueryオブジェクトを利用できないのだろう

javaScriptの長いメソッド名を記述しなくても良いのはjQueryのメリットの1つだと思うのですが、何故jQuery.containsメソッドは引数にjQueryオブジェクトが利用できないのだろう...。

試しに引数にjQueryオブジェクトを指定してみましたが、やはりダメでした...。
→参考:サンプル(contains/test01.html)←buttonをクリックしても処理されません。

$("button").click(function(){
	container = $("body");
	contained = $("#sample");
	var chk = $.contains(container, contained);
	alert(chk);
});