HOME > > > > >

.closest()

めちゃくちゃ便利。使用頻度高。

子要素を探す場合は.find()、親要素を探す場合はこの.closest()を使うと覚えておけば大抵の場合なんとかなるでしょうw

.closest( selector )

引数

(string)selector

戻り値

jQuery
jQueryオブジェクト

jQueryオブジェクトが持つ対象となるDOM要素からDOMツリーをさかのぼってselectorにマッチした最初のDOM要素をjQueryオブジェクトとして返す。 簡単に言うと対象から見てselectorにマッチする直近の親要素をかえす。

イベントターゲットから相対的に要素を特定できるので、イベント処理で大活躍。HTMLのマークアップがどうなってようが関係なく処理を実行できる。

サンプル

実行結果


自由項目です。

必須の入力項目です。

ボタンを押すとテキストを表示します

Javascript

  1. $('.jqTest1 .execute').on('click', function(e){
  2.     alert($(e.target).closest('div.alertText').find('input.targetText').val());
  3. });
  4.  
  5. $('.jqTest1 .add').on('click', function(e){
  6.     $(e.target).parent().append($('.jqTest1 .alertText:first').clone(true));
  7. });

HTML

  1. <div class="jqTest1">
  2.     <!-- 基本形 -->
  3.     <div class="alertText">
  4.         <input type="text" class="targetText" value="target" />
  5.         <button class="execute">Alert</button>
  6.     </div>
  7.  
  8.     <div class="alertText">
  9.         <input type="text" class="targetText" value="target2" /><br />
  10.         <input type="text" class="data[name]" value="偽物ターゲット" />
  11.         <button class="execute">Alert</button><button>偽物ボタン</button>
  12.     </div>
  13.  
  14.     <div class="wrap">
  15.         <div class="alertText">
  16.             <input type="text" class="targetText" value="beforeTarget" />
  17.             <div class="alertText">
  18.                 <input type="text" class="targetText" value="target3" />
  19.                 <button class="execute">Alert</button>
  20.             </div>
  21.             <button class="execute">Alert</button>
  22.         </div>
  23.     </div>
  24.  
  25.     <div class="alertText">
  26.         <div class="form">
  27.             <div class="free">
  28.                 <p>自由項目です。<input type="text" class="notTarget" value="notTarget" /></p>
  29.             </div>
  30.  
  31.             <div class="need">
  32.                 <p>必須の入力項目です。<input type="text" class="targetText" value="target" /></p>
  33.             </div>
  34.             <div>
  35.                 <p>ボタンを押すとテキストを表示します<button class="execute">Alert</button></p>
  36.             </div>
  37.         </div>
  38.     </div>
  39.  
  40.     <button class="add">追加</button>
  41. </div>

CSS

  1.  
  2. .jqTest1 .alertText {
  3.     padding: 1em;
  4.     margin: 1em;
  5.     border: 1px solid #CCCCCC;
  6. }
  7.  
  8. .jqTest1 .wrap {
  9.     background: #EEEFFF;
  10. }
  11.  

.closest( selector [, context] )

.closest( jQuery object )

.closest( element )

.closest( selectors [, context] )