jQuery에서 가장 가까운 조상 노드

Question

내 자바 스크립트 환경에서 "조건 (태그 이름, 클래스, ...)이있는 요소의 가장 가까운 조상을 검색하는"매우 일반적인 작업이라는 것을 알았습니다. jquery의 parents() 메소드를 사용하여 작업을 수행 할 수 있습니까? 부모()의 반환 된 요소의 순서는 예측 가능합니까? 상단에서 하단까지 또는 하단에서 상단까지입니까?

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');

예 - parents()가 트리를 가로 지릅니다.

<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이 작업을 simplifyed. 지정된 선택 일치하는 가장 가까운 부모 요소를 포함 요소의

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

[Closest 리턴한다] 설정을 : 당신이 할 수있는

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

:

는 DOM을 감안할 때 시작 요소는 입니다.

Answer 3

은 여러 요소로 작업 할 때 예상 한 결과를 제공하지 않으므로 closest을 사용해야합니다. 예를 들어, 당신이이 있다고 가정 해 봅시다 :

<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> 

및 그 직계 자식으로 <b> 요소를 가지고있는 div의에 클래스를 추가 할 (즉, 1, 3). $('b').parents('div')을 사용하면 divs 0, 1 및 3을 얻게됩니다. $('b').parents('div:first')을 사용하는 경우 div 1 만 얻습니다. 0이 아닌 1과 3을 얻으려면 $('b').closest(elem)을 사용해야합니다.

는

Answer 4

당신이 찾고있는 부모가 사용 부모() (예. 모두 div가 있습니다) 현재와 같은 태그가있는 경우() 가장 가까운, 현재 요소에서 시작됩니다. 가장 가까운()