closest(selector, [context])


version 1.3 以降

解説

[自身の要素及び祖先要素の検索]
指定された selector にマッチする最も近い祖先要素を返します。

このメソッドは自身の要素から祖先要素を辿り検索します。よって、自身の要素が selector にマッチする場合は、自身の要素を返します。

引数

  • selector
    String: jQueryセレクタ
  • [context]オプション (version 1.4 から)
    DOM Element: 検索対象のDOM要素

戻り値

  • jQuery: selector にマッチする、自身の要素もしくは最も近い祖先要素

例1: span 要素item2-2から自身の要素及び祖先要素のうち、最も近い id が "level" で始まる要素の背景色を黄色にします。

$("#item2-2").closest("[id^=level]").css("background-color", "yellow");

例2: div 要素level3から自身の要素及び祖先要素のうち、最も近い div 要素の背景色を橙色にします。
[解説]この場合は、セレクタに指定した "div" が自分自身にマッチするため、level3 を返します。(level2ではありません。)

$("#level3").closest("div").css("background-color", "orange");

<div id="level1"> <span id="item1-1">Level1 1番目の要素</span>
<div id="level2"> <span id="item2-1">Level2 1番目の要素</span> <span id="item2-2">Level2 2番目の要素</span>
<div id="level3"> <span id="item3-1">Level3 1番目の要素</span> <span id="item3-2">Level3 2番目の要素</span> <span id="item3-3">Level3 3番目の要素</span> <span id="item3-4">Level3 4番目の要素</span> <span id="item3-5">Level3 5番目の要素</span> </div>
</div>
</div>

動作に注意

このメソッドは、自身の要素から祖先要素を辿り検索するので注意しましょう。 なお、parents([expr]) は親要素から辿ります。

また、このメソッドは一番近い親要素を検索するメソッドではありません。祖先要素を検索します。