js STUDIO

.closest()

現在の要素を含み、そこからDOMツリーを遡って指定したセレクターにマッチする最初の要素を選択します。

.closest( selector ) 1.3追加

戻り値:jQuery

引数 説明
selector マッチさせる要素をセレクタで指定します。

.closest( selector [, context] ) 1.4追加

戻り値:jQuery

引数 説明
selector マッチさせる要素をセレクタで指定します。
context セレクタが検索するDocument内の範囲を絞り込む指定をします。

.closest( jQuery object ) 1.6追加

戻り値:jQuery

引数 説明
jQuery object マッチさせる要素をjQueryオブジェクトで指定します。

.closest( element ) 1.6追加

戻り値:jQuery

引数 説明
elements マッチさせる要素をDOM要素で指定します。

.closest( selectors [, context] ) 1.4追加 1.7非推奨 1.8削除

戻り値:Array

引数 説明
selectors マッチさせる要素をセレクタ(またはjQueryオブジェクト)の配列で指定します。
context セレクタが検索するDocument内の範囲を絞り込む指定をします。

jQuery1.7からはこのメソッド(配列を戻り値とするclosest)の使用は非推奨になっています。 jQuery内部での使用、またはプラグイン製作者のみが使用することを前提としています。

補足事項

.closest()と.parents()の違いは下記のようになります。

項目 closest parents
開始位置 現要素から 親要素から
マッチさせる
要素		 DOMツリーを遡り、最初にセレクタの条件に合致した要素のみをマッチ DOMツリーを遡り、各先祖要素をそれぞれマッチ要素として追加。セレクタが指定されていれば、その条件でフィルタリング。
戻り値 0、または1つの要素を含んだjQueryオブジェクト 0、1つ、または複数の要素を含んだjQueryオブジェクト

次のようなコードがあった場合、

<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" class="item-ii">II
  <ul class="level-2">
    <li class="item-a">A</li>
    <li class="item-b">B
      <ul class="level-3">
        <li class="item-1">1</li>
        <li class="item-2">2</li>
        <li class="item-3">3</li>
      </ul>
    </li>
    <li class="item-c">C</li>
  </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

下記のコードを実行すると、遡って最初に合致する'ul'はlevel-2のUL要素であるため、 その要素の背景が赤になります。 

$('li.item-a').closest('ul').css('background-color', 'red');

デモ

Document内の要素をクリックすると、その要素から遡って最初に見つかったLI要素の背景を黄色に変更します。

<!DOCTYPE html>
<html>
<head>
  <style>
  li { margin: 3px; padding: 3px; background: #EEEEEE; }
  li.hilight { background: yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <ul>
    <li><b>クリックしてください</b></li>
    <li>こちらも <b>クリックしてください</b></li>
  </ul>
<script>
  $( document ).bind("click", function( e ) {
    $( e.target ).closest("li").toggleClass("hilight");
  });
</script>
</body>
</html>

第2引数contextを使用した例です。

<!DOCTYPE html>
<html>
<head>
  <style>
  body {font-size:12px;}
  li { margin: 2px; padding: 2px; background: #EEEEEE; }
  li.hilight { background: yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" class="item-ii">II
  <ul class="level-2">
    <li class="item-a">A</li>
    <li class="item-b">B
      <ul class="level-3">
        <li class="item-1">1</li>
        <li class="item-2">2</li>
        <li class="item-3">3</li>
      </ul>
    </li>
    <li class="item-c">C</li>
  </ul>
  </li>
  <li class="item-iii">III</li>
</ul>
<script>
  var listItemII = document.getElementById('ii');
  //level-2のUL要素にマッチ
  $('li.item-a').closest('ul', listItemII)
    .css('background-color', 'red');
  //#oneはlistItemIIより上の階層に存在するため、マッチなし
  $('li.item-a').closest('#one', listItemII)
    .css('background-color', 'green');
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM