jQueryの最も近い先祖ノード

Question

javascriptの経験では、これは非常に一般的なタスクであることがわかりました<！> quot;何らかの条件（タグ名、クラス、...）<！> quot;を持つ要素の最も近い先祖を検索します。 jqueryのparents（）メソッドは仕事をすることができますか？ parent（）の返される要素の順序は予測可能ですか？上から下、または下から上ですか？ 今のところ、このユーティリティ関数を使用します：

function ancestor(elem, selector) {
  var $elem = $( elem ).parent();
  while( $elem.size() > 0 ) {
    if( $elem.is( selector ) ) 
    return $elem;
    else
       $elem = $elem.parent();
  }
  return null;
}

仕事をする賢い方法があるかどうか誰かに教えてもらえますか？

Answer 1

編集：jQuery 1.3以降、これは closest() 関数。例：$('#foo').closest('.bar');

---

yep-parent（）はツリーを上にたどります。

<div id="a">
    <div id="b">
        <p id="c">
            <a id="d"></a>
        </p>
    </div>
</div>

$('#d').parents("div:first");はdiv bを選択します。

Answer 2

@ nickf の回答に追加：

jQuery 1.3は、closestでこのタスクを簡素化しました。

DOMを指定：

<div id="a">
    <div id="b">
        <p id="c">
            <a id="d"></a>
        </p>
    </div>
</div>

できること：

$('#d').closest("div"); // returns [ div#b ]

  

[ Closest が返す]セット   最も近い親を含む要素   指定に一致する要素   セレクター、開始要素   含まれています。

Answer 3

closestを使用する必要があります。複数の要素を使用している場合、parentsでは期待どおりの結果が得られないためです。たとえば、これがあるとします：

    <div id="0">
        <div id="1">test with <b>nested</b> divs.</div>
        <div id="2">another div.</div>
        <div id="3">yet <b>another</b> div.</div>
    </div>

そして、直接の子（つまり1と3）として<b>要素を持つdivにクラスを追加します。 $('b').parents('div')を使用すると、div 0、1、3を取得します。$('b').parents('div:first')を使用すると、div 1のみを取得します。0ではなく1と3を取得するには、$('b').closest(elem)を使用する必要があります。

Answer 4

closest（）は現在の要素から始まります。探している親が現在のタグと同じタグを持っている場合（たとえば、両方ともdiv）、parent（）。closest（）を使用します