HOME>WEBプログラム覚書>[jQuery]closest()とparents()

[jQuery]closest()とparents()

今から16年前Netscapeブラウザのソースコードの公開方法の会議の中で、初めてオープンソースという言葉が使われた今日、 みなさんいかがお過ごしでしょうか。

今回の投稿はそれとは関係のないjQueryのparents()とclosest()が 似てたので何が違うのか試した時のメモです。

closest()とparents()

closest([expr])は選択されたDOM要素の親要素で一番最初に[expr]にマッチした要素を取得します。

サンプル

実行結果

$().closest()は便利だよ。

Javascript

  1. $('.jqTest span').closest('p').css('border', '3px solid #555555');

HTML

  1. <div class="jqTest">
  2.     <div>
  3.         <p><span>$().closest()は便利だよ。</span></p>
  4.     </div>
  5. </div>

これは下記と同じ結果になりますです。

javascript

  1. $('.jqTest span').parents('p').first().css('border', '3px solid #555555');

closest()ができること

closest()の場合、選択したDOM要素も検索対象となります。

サンプル

実行結果

$().closest()は便利だよ。

Javascript

  1. // 要素が見つかればボーダーが付く
  2. $('.jqTest2 .target').closest('.target').css('border', '3px solid #555555');
  3.  
  4. // 要素が見つかれば背景が付く
  5. $('.jqTest2 .target').parents('.target').first().css('background', '#CCCCCC');

HTML

  1. <div class="jqTest2">
  2.     <div>
  3.         <p><span class="target">$().closest()は便利だよ。</span></p>
  4.     </div>
  5. </div>

parents()ができること

closest()は最初のDOM要素だけですが、parents([expr])は[expr]にマッチする親要素全て取得します。

サンプル

実行結果

closest()


parents()

Javascript

  1. $('.jqTest3 p').each(function(i){
  2.     if ($(this).data('func') === 'closest') {
  3.         $(this).closest('div.wrap').css({ border: '3px solid #555555', padding: 10});
  4.     } else if ($(this).data('func') === 'parents') {
  5.         $(this).parents('.wrap').css({ border: '3px solid #555555', padding: 10});
  6.     }
  7. });

HTML

  1. <div class="jqTest3">
  2.     <div class="wrap">
  3.         <div class="wrap">
  4.             <div class="wrap">
  5.                 <p data-func="closest">closest()</p>
  6.             </div>
  7.         </div>
  8.     </div>
  9.  
  10.     <hr />
  11.  
  12.     <div class="wrap">
  13.         <div class="wrap">
  14.             <div class="wrap">
  15.                 <p data-func="parents">parents()</p>
  16.             </div>
  17.         </div>
  18.     </div>
  19. </div>

パフォーマンスはclosest()の方がよさそうですね。

投稿日 2012年2月 3日 13:57
カテゴリ JavaScript
タグ jQuery | 動作確認
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1264

コメント

コメントする
Name
Email Address
URL