closestメソッド

メソッドclosestは、 メソッドのパラメータとして指定されたセレクターに一致する 最も近い親要素を見つけます。この メソッドは、 parentメソッドに似ています。 検索は次のように行われます: まず要素の直接の 親がチェックされ、次に祖父母、曾祖父母 というように、ルート要素(つまりhtmlタグ)まで続きます。

構文

セレクターには、DOM要素、式、または jQueryオブジェクトを指定できます。検索は、 パラメータとして渡されたDOM要素から開始します:

javascript.closest(セレクター);

2番目のパラメータとしてDOM要素を渡すこともでき、 その場合、検索はその要素内で行われます:

javascript.closest(セレクター, コンテキスト);

例

要素#testに対して、 クラスwwwを持つ最も近い親を見つけ、 その要素の先頭にテキスト'!'の段落を挿入し、 末尾にテキスト'?'の段落を挿入してみましょう:

html<div>
  <div class="www">
    <div>
      <p id="test">テキスト</p>
    </div>
  </div>
</div>
javascript$('#test').closest('.www').append('<p>?</p>').prepend('<p>!</p>');

HTMLコードは次のようになります:

html<div>
  <div class="www">
    <p>!</p>
    <div>
      <p id="test">テキスト</p>
    </div>
    <p>?</p>
  </div>
</div>

関連項目

  • メソッドparent,
    要素の直接の親を取得できます
  • メソッドparents,
    要素のすべての親を取得できます
  • メソッドparentsUntil,
    指定された親までのすべての親を取得できます
  • JavaScriptメソッドclosest,
    最も近い親要素を取得できます