)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メソッドを利用して赤枠を表示しています。red");});結果として、buttonをクリックするとdiv要素に赤枠が表示されます。直近の要素だけですclosestメソッドは直近の先祖要素しか選択しません。サンプル(closest/02.html)を開いて下さい。サンプルclosest/01.htmlと異なりb要素の外には2つのdiv要素(クラス属性がそれぞれsmall,large)があります。jQueryはサンプルclosest/01.htmlから変更はありません。class="small">これは<b>jQuery</b>のサンプルです</div></div>buttonをクリックすると、jQueryオブジェクトで指定したb要素に最も近いdiv要素(class属性がsmall)にだけ赤枠が表示されます。close(近い)の最上級でclosestですから直近の要素しか選択しないのです。parentsメソッドを利用します。→参考:サンプル(parents/test01.html)第2引数の利用ver1.4から第2引数にDOM要素を指定して、調査範囲を限定することができるようになりました。第2引数を設定していないサンプル(closest/03.html)を開いてbody内の構成を確認してください。div要素が入れ子になっており、一番外側のdiv要素にはクラス属性sampleがあり2番目に外側のdiv要素にはid属性testが設定されています。下の階層にp要素があります。id="test"><div><div><p>div要素内のp要素です</p></div></div></div></div>jQueryは以下の様に記述され、p要素から一番近いクラス属性sampleの要素を選択するようにしています。結果として、buttonをクリックすると一番外側のdiv要素の枠線が赤くなります。red");})続いて第2引数を設定したサンプルを確認します。サンプル(closest/04.html)を開いてbody内の構成はサンプルclosest/03.htmlから変更がないことを確認して下さい。次にjQueryは以下の様に記述され、closestメソッドの第2引数にtargetDOMが設定されています。targetDOMは1行目で設定されtestのid属性が指定されています。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と同じになります。red");});結果としてサンプルclosest/01.htmlと全く同じ動作になります。無意味な構文に感じるかもしれませんが、この構文は処理の高速化につながります。jQueryではマッチした要素を選択するのに負荷がかかるため、選択の回数をなるべく減らす必要があります。要素を選択したjQueryオブジェクトを使いまわすことで負荷が減るのです。このサンプルではclosestメソッドのためにわざわざjQueryオブジェクトを作成しているので高速化にはつながりません。配列を利用する(v1.8で廃止されました)引数に配列を利用することで、複数のセレクタを利用することができます。この構文は推奨されておらず、すでにv1.8で廃止されました。そのため紹介するサンプルではv1.7.2を利用しています。src="../../../css_js/jquery-1.7.2.min.js"></script>サンプル(closest/06.html)を開いてhtml構成はサンプルclosest/01.htmlから変更がないことを確認して下さい。jQueryは以下の様に記述され、buttonをクリックすると配列を設定したclosestメソッドの返値を変数selectArrayにいれてアラートで表示するようにしています。parentsメソッドを利用します。parentメソッドを利用します。メモ自分を含みますclosestメソッドは調査範囲に自分を含みます。サンプル(closest/test01.html)を開いてbody内の構成を確認して下さい。以下の様に一番外側と一番内側のdiv要素にclass属性sampleが設定されています。内側のdiv要素にはid属性testを設定しました。id="test"></div></div></div></div>続いてjQueryが以下の様に記述されているのを確認してください。id属性testの要素から一番近いクラス属性sampleの要素を選択するようにしています。red");})buttonをクリックすると一番内側のdiv要素が選択されることから、closestメソッドは調査範囲に自分を含むとが確認できます。parentsメソッドは自分を含みません。サンプル(closest/test01b.html)を開いてbody内の構成がclosest/test01.htmlと同じ事を確認してください。jQueryは以下の様にclosestメソッドの代わりにparentsメソッドを使いました。red");})buttonをクリックすると一番内側のdiv要素は選択されないことから、parentsメソッドは調査範囲に自分を含まないことが確認できます。