Cách sạch hơn để viết element.parent(). Parent(). Parent(). Parent(). Parent()

Question

Nếu tôi cần chọn phụ huynh thứ 10, có cách nào sạch hơn, sau đó lặp lại .parent() 10 lần?

$('#element_id').parent().parent().parent().parent().parent().parent().parent().parent().parent().parent(); 

Answer 1

Nếu bạn thực sự cần phải nhận được phụ huynh 10, và bạn không thể sử dụng một bộ chọn để đạt được điều đó, cách mượt mà có lẽ sẽ là một cái gì đó như thế này:

$('#element_id').parents().eq(9); 

Answer 2

Nếu có một selector đại diện cho mục tiêu mà bạn đang theo đuổi, sau đó sử dụng .closest() hoặc .parents().

$('#element_id').closest('.someClass'); 
$('#element_id').parents('.someClass:first'); 

... nhưng cả hai sẽ trả về kết quả đầu tiên được tìm thấy. Giải pháp thích hợp sẽ phụ thuộc vào đánh dấu HTML thực tế của bạn.

(Lưu ý rằng .closest() cũng đánh giá các yếu tố ban đầu, trong khi parents() bắt đầu với tổ tiên đầu tiên.)

Cũng nên nhớ rằng các trình duyệt thực hiện chỉnh sửa HTML. Vì vậy, nếu bạn đang đi ngang từ bên trong một số <table> không có <tbody> thành phần tử bên ngoài <table>, làm số x .parent() có thể cho kết quả khác nhau trong các trình duyệt khác nhau.

Answer 3

Các bài sau here sử dụng thực hiện điều này:

jQuery.fn.getParent = function(num) { 
    var last = this[0]; 
    for (var i = 0; i < num; i++) { 
     if(!last) break; 
     last = last.parentNode; 
    } 
    return jQuery(last); 
}; 
// usage: 
$('#myElement').getParent(3); 

nên sử dụng của bạn sẽ chỉ đơn giản là:

$('#element_id').getParent(10); 

Answer 4

Tôi đã sử dụng mã này:

var position = $("#test").parents("div").length - 10; 
$("#test").closest("div:eq(" + position + ")").append("here!!!"); 

với HTML :

<div> 
     <div> 
      <div> 
       <div> 
        <div> 
         <div> 
          <div> 
           <div> 
            <div> 
             <div> 
              <div> 
               <span id="test">here</span> 
              </div> 
             </div>  
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

Có nghĩa là 11 div. do đó, chạy mã nên dừng lại ở div thứ 10 và nối thêm ở đây !!!

Tôi chắc chắn mã này có thể còn sạch hơn nữa.

Không cần thêm lớp học.

Chỉnh sửa: Tôi đã sử dụng 11 DIV để bạn có thể thấy nó không phải là lần đầu tiên, nó thực sự dừng lại ở ngày 10.