jQuery에서 요소의 n번째 수준 상위 항목을 가져오려면 어떻게 해야 합니까?

jQuery에서 요소의 n번째 수준 상위 항목을 가져오려면 어떻게 해야 합니까?

예를 들어, 내가 써야 하는 요소의 3단계 부모를 얻고 싶을 때$('#element').parent().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")

를 사용하여 답을 찾지 못했으며 필요한 요소가 몇 단계 위에 있는지 모를 때 가장 간단한 답이라고 생각하므로 답을 게시합니다.
사용할 수 있습니다.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'

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

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

이것은 jQuery를 연결하는 것보다 브라우저에서 훨씬 더 빨리 실행됩니다..parent()전화가 걸려오는 전화.

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

간단합니다.그냥 사용하기

$(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가 있는 경우 parentEtil() 링크를 사용할 수 있습니다.

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

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

다음을 사용할 수도 있습니다.

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

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

eq를 사용하면 동적 DOM을 잡는 것처럼 보이지만 .parent().parent()를 사용하면 초기에 로드된 DOM을 잡는 것처럼 보입니다(가능한 경우).

저는 마우스 위에 클래스가 적용된 요소에서 둘 다 사용합니다.eq는 클래스를 표시하는 반면 .parent "parent"는 표시하지 않습니다.

부모()가 목록을 반환할 때 이것도 작동합니다.

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

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

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

언급URL : https://stackoverflow.com/questions/7093659/how-do-i-get-the-n-th-level-parent-of-an-element-in-jquery