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

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

.closest( )直近の祖先要素を選択

構文

引数で指定した直近の祖先要素を選択する返値:jQueryオブジェクト
jQo.closest( セレクタ )ver1.3〜
jQo.closest( セレクタ [,DOM要素] )ver1.4〜
jQo.closest( jQo/DOM )ver1.6〜
引数で指定した複数の祖先要素を選択する返値:配列
jQo.closest( 配列 [,DOM要素] )ver1.4〜
ver1.8で廃止されました

機能

jQueryオブジェクトで指定した要素の祖先要素で引数にマッチする直近の(もっとも近い)要素を選択します。
直近の要素が見つかると調査を終えるためparentsメソッドよりも高速に処理できます。直近の先祖要素しか選択しない場合はclosestメソッドを利用しましょう。

解説

引数にセレクタを設定

サンプル(closest/01.html)を開いてdiv要素内にp要素、その中にb要素があることを確認して下さい。

<div><p>これは<b>jQuery</b>のサンプルです</p></div>

jQueryは以下の様に記述され、まずjQueryオブジェクトで指定したb要素が選択されます。そこからclosestメソッドで先祖要素を辿っていき最初に見つかったdiv要素を選択しています。選択した要素はcssメソッドを利用して赤枠を表示しています。

$("button").click(function(){
	$("b").closest("div").css("border","3px solid red");
});

結果として、buttonをクリックするとdiv要素に赤枠が表示されます。

直近の要素だけです

closestメソッドは直近の先祖要素しか選択しません。サンプル(closest/02.html)を開いて下さい。サンプルclosest/01.htmlと異なりb要素の外には2つのdiv要素(クラス属性がそれぞれsmall,large)があります。jQueryはサンプルclosest/01.htmlから変更はありません。

<div class="large">
	<div class="small">
		これは<b>jQuery</b>のサンプルです
	</div>
</div>

buttonをクリックすると、jQueryオブジェクトで指定したb要素に最も近いdiv要素(class属性がsmall)にだけ赤枠が表示されます。close(近い)の最上級でclosestですから直近の要素しか選択しないのです。

両方のdiv要素を選択したい場合はparentsメソッドを利用します。
→参考:サンプル(parents/test01.html

第2引数の利用

ver1.4から第2引数にDOM要素を指定して、調査範囲を限定することができるようになりました。まずは第2引数を設定していないサンプル(closest/03.html)を開いてbody内の構成を確認してください。div要素が入れ子になっており、一番外側のdiv要素にはクラス属性sampleがあり2番目に外側のdiv要素にはid属性testが設定されています。そして一番下の階層にp要素があります。

<div class="sample">
	<div id="test">
		<div>
			<div>
				<p>div要素内のp要素です</p>
			</div>
		</div>
	</div>
</div>

jQueryは以下の様に記述され、p要素から一番近いクラス属性sampleの要素を選択するようにしています。結果として、buttonをクリックすると一番外側のdiv要素の枠線が赤くなります。

$("button").click(function(){
	$("p").closest(".sample").css("border","1px solid red");
})

続いて第2引数を設定したサンプルを確認します。サンプル(closest/04.html)を開いてbody内の構成はサンプルclosest/03.htmlから変更がないことを確認して下さい。次にjQueryは以下の様に記述され、closestメソッドの第2引数にtargetDOMが設定されています。targetDOMは1行目で設定されtestのid属性が指定されています。

var targetDOM = document.getElementById('test');
$("button").click(function(){
	$("p").closest(".sample", targetDOM).css("border","1px solid red");
})

このサンプルではbuttonをクリックしても、どのdiv要素にも赤枠は付きません。それは第2引数にtestのid属性を指定したことで、調査範囲がtestのid属性の要素内に限定されたためです。この範囲内にclass属性sampleの要素が無いためです。し

引数にjQueryオブジェクトを利用

ver1.6から引数にjQueryオブジェクトを設定できるようになりました。すでに存在するjQueryオブジェクトを利用することで処理の高速化が期待できます(jQueryではセレクタで要素を選択することに結構負荷が掛かるので)。→参考:使い方「jQueryの高速化:jQueryはオブジェクトに記憶しておく」

サンプル(closest/05.html)を開いてhtmlの構成はサンプルclosest/01.htmlから変更がないことを確認して下さい。jQueryは以下の様に記述され、closestメソッドの引数にjQueryオブジェクトのmyObjが設定されています。myObを1行目で作成されdiv要素にマッチしたjQueryオブジェクトになっています。つまり機能的にはサンプルclosest/01.htmlと同じになります。

var myObj = $("div");
$(function () {
	$("b").closest(myObj).css("border","3px solid red");
});

結果としてサンプルclosest/01.htmlと全く同じ動作になります。無意味な構文に感じるかもしれませんが、この構文は処理の高速化につながります。jQueryではマッチした要素を選択するのに負荷がかかるため、選択の回数をなるべく減らす必要があります。ですので、すでに要素を選択したjQueryオブジェクトを使いまわすことで負荷が減るのです。
このサンプルではclosestメソッドのためにわざわざjQueryオブジェクトを作成しているので高速化にはつながりません。

配列を利用する(v1.8で廃止されました)

引数に配列を利用することで、複数のセレクタを利用することができます。ただしこの構文は推奨されておらず、すでにv1.8で廃止されました。そのため紹介するサンプルではv1.7.2を利用しています。

<script type="text/javascript" src="../../../css_js/jquery-1.7.2.min.js"></script>

サンプル(closest/06.html)を開いてhtml構成はサンプルclosest/01.htmlから変更がないことを確認して下さい。jQueryは以下の様に記述され、buttonをクリックすると配列を設定したclosestメソッドの返値を変数selectArrayにいれてアラートで表示するようにしています。

$("button").click(function(){
	var selectArray = $("b").closest(["div","p"]);
	alert(selectArray[0].elem.nodeName + " " + selectArray[1].elem.nodeName)
})

引数に配列を設定した場合の返値はDOM要素の配列のためjavaScriptに詳しくないと扱いにくいかもしれません。

関連項目

先祖要素すべてを選択したい場合はparentsメソッドを利用します。
先祖要素のうち親要素を選択したい場合はparentメソッドを利用します。

メモ

自分を含みます

closestメソッドは調査範囲に自分を含みます。サンプル(closest/test01.html)を開いてbody内の構成を確認して下さい。以下の様に一番外側と一番内側のdiv要素にclass属性sampleが設定されています。また一番内側のdiv要素にはid属性testを設定しました。

<div class="sample">
	<div>
		<div>
			<div class="sample" id="test">
			</div>
		</div>
	</div>
</div>

続いてjQueryが以下の様に記述されているのを確認してください。id属性testの要素から一番近いクラス属性sampleの要素を選択するようにしています。

$("button").click(function(){
	$("#test").closest(".sample").css("border","1px solid red");
})

buttonをクリックすると一番内側のdiv要素が選択されることから、closestメソッドは調査範囲に自分を含むとが確認できます。

ちなみにparentsメソッドは自分を含みません。サンプル(closest/test01b.html)を開いてbody内の構成がclosest/test01.htmlと同じ事を確認してください。jQueryは以下の様にclosestメソッドの代わりにparentsメソッドを使いました。

$("button").click(function(){
	$("#test").parents(".sample").css("border","1px solid red");
})

buttonをクリックすると一番内側のdiv要素は選択されないことから、parentsメソッドは調査範囲に自分を含まないことが確認できます。