jQuery遍歴-closest()メソッドの紹介とparents()メソッドとの違い

3552 ワード
closest()法は、現在の要素からDOMツリーに沿って上向きにマッチングセレクタの最初の祖先要素を得る.
構文:
.closest(selector)
パラメータselectorは文字列値で、一致する要素を含むセレクタ式です.
DOM要素の集合を表すjQueryオブジェクトが与えられると、closest()メソッドを使用すると、DOMツリー内のこれらの要素とそれらの祖先要素を検索し、一致する要素で新しいjQueryオブジェクトを構築できます.parents()と.closest()メソッドは同様で、DOMツリーに沿って上を巡回します.両者の違いは微妙ですが、重要です.
.closest()
.parents()
現在の要素から開始
親要素から開始
適用されたセレクタの一致が見つかるまで、DOMツリーに沿って上を巡回します.
ドキュメントのルート要素までDOMツリーに沿って上へ遍歴し、各祖先要素を一時的な集合に追加します.セレクタが適用されると、セレクタに基づいてこのセットがフィルタされます. 
ゼロまたは1つの要素を含むjQueryオブジェクトを返します.
ゼロ、1、または複数の要素を含むjQueryオブジェクトを返します.
まず、closest()でイベント依頼を完了する方法を示す例を見てみましょう.最も近いリスト要素またはその子の子孫要素がクリックされると、黄色の背景が切り替わります.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<style>
  li { margin: 3px; padding: 3px; background: #EEEEEE; }
  li.hilight { background: yellow; }
</style>
</head>
<body>
  <ul>
    <li><b>Click me!</b></li>
    <li>You can also <b>Click me!</b></li>
  </ul>
<script>
  $( document ).bind("click", function( e ) {
    $( e.target ).closest("li").toggleClass("hilight");
  });
</script>
</body>
</html>

1、マウスで「You can also」をクリックすると、色が変わります.これはclosestが現在の要素から上へ遍歴しているためです.parents()メソッドとは異なり、現在の要素の親要素から上へ遍歴します.2、Click meをクリック!を選択すると、色も変わります.これも同様に上記の手順を経て、現在の要素から上へマッチングしますが、は条件に合致せず、さらに上へ行くと
  • に遭遇します.
    3、実例のプレゼンテーションにアクセスしてください:http://www.w3school.com.cn/tiy/t.asp?f=jquery_traversing_closest
    例2:
    <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>

    $('li.item-a').closest('ul').css('background-color', 'red');
    結果:
    これは、DOMツリーを上に移動すると要素が最初に遭遇するため、level-2
      の色が変わります.
      次の図に示します.
    • 要素を検索したとします
      $('li.item-a').closest('li').css('background-color', 'red');
      リスト項目Aの色が変わります.DOMツリーを見上げる前に、closest()メソッドは、セレクタがアイテムAに一致するまでli要素自体から検索を開始します.
      例3
      DOM要素をcontext(すなわち、検索の最大範囲を限定する)として渡し、最も近い要素を検索することができます.
      var listItemII = document.getElementById('ii');
$('li.item-a').closest('ul', listItemII).css('background-color', 'red');
$('li.item-a').closest('#one', listItemII).css('background-color', 'green');

      上記のコードは、リスト項目Aの最初の
        祖先であり、リスト項目IIの子孫でもあるため、level-2
          の色を変更します.
          list item IIの子孫ではないため、level-1
            の色は変わりません.次のソース:http://www.w3school.com.cn/jquery/traversing_closest.asp
    • Matlabロボットツールボックス(0)——回転と平行移動変換
    Angularjs学習ノート(一)基礎