jQuery에서 요소의 n 번째 수준 부모를 얻으려면 어떻게해야합니까?

예를 들어, 내가 작성해야하는 요소의 3 차 부모를 얻으려면 $('#element').parent().parent().parent()더 최적의 방법이 있습니까?

때문에 부모가 () 외부 사람에 가장 가까운에서 주문 조상 요소를 반환, 당신은에 그것을 체인 수 ) (EQ :

$('#element').parents().eq(0);  // "Father".
$('#element').parents().eq(2);  // "Great-grandfather".

찾고있는 부모를 아는 경우 필요에 따라 .parents () 선택기를 사용할 수 있습니다.

예 : http://jsfiddle.net/HenryGarle/Kyp5g/2/

<div id="One">
    <div id="Two">
        <div id="Three">
            <div id="Four">

            </div>
        </div>
    </div>
</div>


var top = $("#Four").parents("#One");

alert($(top).html());

인덱스를 사용하는 예 :

//First parent - 2 levels up from #Four
// I.e Selects div#One
var topTwo = $("#Four").parents().eq(2);

alert($(topTwo ).html());

대상 부모에게 ID 또는 클래스 (예 : myParent)를 줄 수 있으며 참조는 $('#element').parents(".myParent")

더 빠른 방법은 자바 스크립트를 직접 사용하는 것입니다.

var parent = $(innerdiv.get(0).parentNode.parentNode.parentNode);

jQuery .parent()호출을 연결하는 것보다 브라우저에서 훨씬 빠르게 실행됩니다 .

참조 : http://jsperf.com/jquery-get-3rd-level-parent

를 사용하여 답변을 찾지 못했습니다 closest() . 필요한 요소의 레벨 수를 모르는 경우 가장 간단한 대답이라고 생각합니다. 따라서 답변을 게시하십시오. 선택자와 결합 된 함수를
사용하여 closest()일치하는 첫 번째 요소를 얻을 수 있습니다 요소에서 위쪽으로 순회하는 경우 :

('#element').closest('div')    // returns the innermost 'div' in its parents
('#element').closest('.container')    // returns innermost element with 'container' class among parents
('#element').closest('#foo')    // returns the closest parent with id 'foo'

간단 해. 그냥 사용

$(selector).parents().eq(0); 

여기서 0은 부모 수준입니다 (0은 부모, 1은 부모의 부모 등입니다)

다음 :eq()과 같이 선택기를 추가 하십시오.

$("#element").parents(":eq(2)")

부모를 지정하는 색인을 지정하십시오. 직계 부모의 경우 0, 조부모의 경우 1, ...

이 기능을 재사용하려는 경우 최적의 솔루션은 jQuery 플러그인을 만드는 것입니다.

(function($){
$.fn.nthParent = function(n){
  var $p = $(this);
  while ( n-- >= 0 )
  {
    $p = $p.parent();
  }
  return $p;
};
}(jQuery));

물론 선택기 및 기타 항목을 허용하도록 확장 할 수도 있습니다.

참고 사항 : 이것은 0부모를위한 기반 색인을 사용하므로을 nthParent(0)호출하는 것과 같습니다 parent(). 오히려 1인덱싱 을 기반으로하려면n-- > 0

공통 상위 div가있는 경우 parentsUntil () 링크를 사용할 수 있습니다

예 : $('#element').parentsUntil('.commonClass')

장점은이 요소와 공통 상위 (commonclass에 의해 정의 됨) 사이에 몇 세대가 있는지 기억할 필요가 없다는 것입니다.

당신은 또한 사용할 수 있습니다 :

$(this).ancestors().eq(n) 

예 : $(this).ancestors().eq(2)->의 부모의 부모 this.

다음과 같은 것을 사용할 수 있습니다.

(function($) {
    $.fn.parentNth = function(n) {
        var el = $(this);
        for(var i = 0; i < n; i++)
            el = el.parent();

        return el;
    };
})(jQuery);

alert($("#foo").parentNth(2).attr("id"));

http://jsfiddle.net/Xeon06/AsNUu/

eq를 사용하면 동적 DOM을 가져 오는 것처럼 보이고 .parent (). parent ()를 사용하면 처음에로드 된 DOM을 가져옵니다 (가능한 경우).

나는 onmouseover에 클래스가 적용된 요소에서 둘 다 사용합니다. eq는 클래스를 표시하지만 .parent (). parent ()는 그렇지 않습니다.

로 부모 () 목록을 반환,이 또한 작동

$('#element').parents()[3];