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

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

:has( )指定したセレクタを子孫要素に持つ要素を選択

構文

指定したセレクタを子孫要素に持つ要素を選択
$("セレクタ1:has(セレクタ2)")ver1.1.4〜
※:(コロン)を忘れないように注意しましょう

機能

セレクタ1に続けて:(コロン)hasを設定し、引数としてセレクタ2を指定すると指定したセレクタ2を「子孫要素」に持つセレクタ1の要素を選択します。

解説

選択される要素に注意

サンプル(has/01.html)を開いてbody内の構成を確認して下さい。div要素が4つあり、上から2番目のdiv要素はa要素を持っています。jQueryは以下の様に記述され、buttonをクリックすると子要素としてa要素をもつdiv要素を選択します。選択された要素はcssメソッドを利用して背景を緑にします。

$("button").click(function(){
	$("div:has('a')").css("background-color","#9f9");
});

結果として、buttonをクリックするとa要素を持つdiv要素の背景色が緑になります。a要素が選択されるのではなく、a要素を持っているdiv要素が選択されることに注意して下さい。

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

hasメソッドの引数で指定した子要素は直下にある必要はありません。サンプル(has/02.html)を開いてbody内の構成を確認して下さい。ほとんどhas/01.htmlと同じですが、2番目のdiv要素が以下の様にb要素を追加されています。そのためa要素はdivの直下ではなくなりました。

<div>div</div>
<div><b><a href="http://www.yahoo.co.jp/">yahooへのリンク</a></b></div>
<div>div</div>
<div>div</div>

しかしhasメソッドで指定した要素は直下である必要はないので(調査範囲は子要素ではなく子孫要素です)、buttonをクリックするとhas/01.htmlと同じようにdiv要素を選択することができます。

関連項目

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

トラバースにも同じような機能を持つhasメソッドがあります。こちらは引数にDOM要素を設定することができます。