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

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

:contains( )引数で指定した文字列を含む要素を選択

構文

引数で指定した文字列を含む要素を選択
$(":contains(文字列)")ver1.1.4〜
※:(コロン)を忘れないように注意しましょう

機能

:(コロン)に続けてcontainsを設定すると引数で指定した文字列を含む要素を選択します。

解説

調査範囲は子孫要素にまで及びます

サンプル(contains/01.html)を開いてbody内にdiv要素とspan要素が2つずつあることを確認して下さい。各要素のうち1つは内容に「ほにゃらら」が含まれています。

jQueryでは以下の様に記述され、buttonをクリックすると「ほにゃらら」を含む要素を選択します。選択した要素はcssメソッドを利用して赤枠を表示します。

$("button").click(function(){
	$(":contains('ほにゃらら')").css("border","3px solid red");
});

buttonをクリックすると「ほにゃらら」が含まれているdiv要素やspan要素以外にもhtml要素やbody要素が選択されていることに注意してください。containsメソッドは自分だけでなく子孫要素が指定した文字列を含む場合でも選択されるのです

他のセレクタと組みあわせる

containsメソッドは調査範囲が広いので、他のセレクタと合わせて利用することがほとんどです。サンプル(contains/02.html)を開いてbody内の構成はサンプルcontains/01.htmlから変更がないことを確認してください。jQueryは以下の様に変更され、div要素と組みあわせて利用するようにしました。

$("button").click(function(){
	$("div:contains('ほにゃらら')").css("border","3px solid red");
});

結果として、buttonをクリックするとdiv要素のうち、内容に「ほにゃらら」を持つ要素だけが選択されます。

関連項目

特定の内容(テキストノード)を持っているかではなく、特定の子孫要素を持っている要素を選択したい場合は:has()を利用します。

メモ

Traversingにcontentsメソッドというものがあります。名前は似ていますが機能は微妙に異なり、要素内のコンテンツを抜き出す機能を持っています。