Làm cách nào để tôi có được cha mẹ cấp n của một phần tử trong jQuery?

Khi tôi muốn lấy, ví dụ, cha mẹ cấp 3 của phần tử tôi phải viết $('#element').parent().parent().parent()Có phương pháp nào tối ưu hơn cho việc này không?

Vì cha mẹ () trả về các phần tử tổ tiên được sắp xếp từ gần nhất với các phần tử bên ngoài, bạn có thể xâu chuỗi nó thành eq () :

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

Tùy thuộc vào nhu cầu của bạn, nếu bạn biết cha mẹ bạn đang tìm kiếm gì, bạn có thể sử dụng bộ chọn .parents ().

TRỨNG: 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());

Ví dụ sử dụng chỉ mục:

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

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

Bạn có thể cung cấp cho cha mẹ đích một id hoặc lớp (ví dụ myParent) và tham chiếu với $('#element').parents(".myParent")

Một cách nhanh hơn là sử dụng javascript trực tiếp, ví dụ.

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

Điều này chạy nhanh hơn đáng kể trên trình duyệt của tôi so với .parent()các cuộc gọi jQuery .

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

Không tìm thấy câu trả lời nào bằng cách sử dụng closest() và tôi nghĩ đó là câu trả lời đơn giản nhất khi bạn không biết có bao nhiêu cấp độ của phần tử được yêu cầu, vì vậy hãy đăng câu trả lời:
Bạn có thể sử dụng closest()chức năng kết hợp với bộ chọn để có được phần tử đầu tiên phù hợp khi di chuyển lên trên từ phần tử:

('#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'

Thật đơn giản. Chỉ dùng

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

trong đó 0 là cấp độ cha mẹ (0 là cha mẹ, 1 là cha mẹ của cha mẹ, v.v.)

Chỉ cần thêm :eq()bộ chọn như thế này:

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

Bạn chỉ cần xác định chỉ mục mà cha mẹ: 0 cho cha mẹ ngay lập tức, 1 cho cha mẹ lớn, ...

Nếu bạn có kế hoạch sử dụng lại chức năng này, giải pháp tối ưu là tạo một plugin jQuery:

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

Tất nhiên, bạn có thể muốn mở rộng nó để cho phép một bộ chọn tùy chọn và những thứ khác.

Một lưu ý: điều này sử dụng một 0chỉ mục dựa trên cha mẹ, vì vậy nthParent(0)cũng giống như gọi điện thoại parent(). Nếu bạn muốn 1lập chỉ mục dựa trên, hãy sử dụngn-- > 0

Nếu bạn có div cha mẹ chung, bạn có thể sử dụng liên kết ParentUntil ()

ví dụ: $('#element').parentsUntil('.commonClass')

Ưu điểm là bạn không cần phải nhớ có bao nhiêu thế hệ giữa phần tử này và phần tử chung (được xác định bởi lớp chung).

bạn cũng có thể dùng :

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

ví dụ: $(this).ancestors().eq(2)-> cha mẹ của cha mẹ của this.

Bạn có thể sử dụng một cái gì đó như thế này:

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

bằng cách sử dụng eq để lấy DOM động trong khi sử dụng .parent (). Parent () dường như lấy DOM đã được tải ban đầu (nếu điều đó thậm chí có thể).

Tôi sử dụng cả hai trên một phần tử có các lớp được áp dụng cho onmouseover. eq hiển thị các lớp trong khi .parent (). Parent () không.

Khi cha mẹ () trả về một danh sách, điều này cũng hoạt động

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