jQuery chọn tổ tiên

Question

Có thể sử dụng jQuery để chọn tổ tiên của một phần tử không?

Markup:

<div id="ancestor-1"> 
    <div> 
     <a href="#" class="click-me">Click me</a> 
    </div> 
</div> 
<div id="ancestor-2"> 
    <div> 
     <a href="#" class="click-me">Click me</a> 
    </div> 
</div> 

Script:

$(".click-me").click(function(){ 
    // var ancestorId = ???; 
    alert(ancestorId) 
}); 

Answer 1

Bạn đang tìm kiếm parent()? jQuery Doc cho bộ chọn gốc. Nếu nó khác nhau cho kịch bản của bạn giải thích đầu ra dự kiến ​​của bạn là gì.

Answer 2

Bạn có ý nghĩa như thế này?

$('.click-me').click(function() { 
    var $theAncestor = $(this).closest('#ancestor-1'); 
} 

Điều này sẽ tìm kiếm thông qua tất cả tổ tiên cho đến khi kết hợp được tìm thấy.

http://api.jquery.com/closest/

EDIT:

Jerome, câu hỏi của bạn có thể được hiểu theo nhiều cách. Điều này nói lên sức mạnh và tính linh hoạt của jQuery.

Vui lòng xem xét những điều sau đây.

Đầu tiên, để trả lời câu hỏi của bạn, có, có thể sử dụng jQuery để chọn tổ tiên của một phần tử.

Tôi nghĩ chúng ta có thể giả định rằng bạn nhận thức được khả năng của jQuery để chọn bất kỳ yếu tố, cho dù tổ tiên hay hậu duệ qua:

$('#myElement') 

Với nhấp tôi Ví dụ, nếu bạn muốn có một bộ tất cả các tổ tiên của một nguyên tố trở lại, sử dụng:

$(this).parents() 

hoặc

$(this).parents(selector) 

Nhưng lưu ý rằng điều này sẽ đi qua TẤT CẢ tổ tiên trả lại tất cả hoặc tất cả khớp với nhau khi chọn một công cụ chọn.

Nếu bạn muốn có phụ huynh ngay lập tức quay trở lại, sử dụng:

$(this).parent() 

Nếu bạn biết mà tổ tiên bạn cần, sử dụng:

$(this).closest(selector) 

Nhưng lưu ý rằng nó sẽ chỉ trả lại trận đầu tiên, và nếu phần tử hiện tại (này) là một trận đấu, nó sẽ trả về điều đó.

Tôi hy vọng điều này sẽ hữu ích.

Answer 3

Hãy thử parent() cho phần tử gốc ngay lập tức.

$(".click-me").click(function() { 
    var ancestor = $(this).parent(); 
    alert(ancestor) 
}); 

Hoặc parents() cho tất cả các yếu tố tổ tiên phù hợp.

$(".click-me").click(function() { 
    var ancestors = $(this).parents(".some-ancestor"); 
    alert(ancestors) 
}); 

Hoặc closest() cho các phần tử phù hợp nhất đầu tiên (hoặc một tổ tiên hoặc tự túc).

$(".click-me").click(function() { 
    var ancestor = $(this).closest(".some-ancestor"); 
    alert(ancestor) 
}); 

Sự khác biệt giữa parents() và closest() là nhỏ nhưng quan trọng. closest() sẽ trả về phần tử hiện tại nếu đó là kết quả phù hợp; parents() trả lại chỉ tổ tiên. Bạn không muốn khả năng trả về phần tử hiện tại. closest() cũng chỉ trả về một phần tử; parents() trả về tất cả các yếu tố phù hợp.

Answer 4

http://api.jquery.com/parent/ và http://api.jquery.com/parents/

$(".click-me").click(function(){ 
    var ancestorId = $(this).parent().parent(); 
    alert(ancestorId) 
}); 

sẽ trả lại các div với id

Answer 5

Hãy thử sử dụng các bậc cha mẹ() hoặc gần nhất() kết hợp, có lẽ, với một chọn để xác định tổ tiên phải phù hợp. Ví dụ, tìm div tổ tiên gần nhất với một id.

$('.click-me').click(function() { 
     var ancestorId = $(this).closest('div[id]'); 
     alert(ancestorId); 
}); 

Answer 6

Nó thực sự phụ thuộc vào những gì bạn muốn đạt được. Bạn có muốn tìm kiếm tất cả tổ tiên bất kể lớp được sử dụng không? Hay bạn muốn tìm kiếm tất cả các yếu tố là tổ tiên và có lớp nhất định (tổ tiên-x trong trường hợp của bạn)?

Nếu bạn muốn chu kỳ thông qua bất kỳ tổ tiên, chỉ cần sử dụng .parent() (có một ví dụ tuyệt vời như thế nào để chu kỳ thông qua tất cả các yếu tố) hoặc .parents() mà bạn có thể sử dụng như:

$(".click-me").click(function(){ 
    var parentElements = $(this).parents().map(function() { 
     return this.tagName; 
    }) 
    // whatever else you want to do with it 
}); 

Có lẽ cách tiếp cận tốt nhất là nên sử dụng .parents() cho đến khi bạn đến phần tử với id hoặc lớp nhất định. Nó thực sự phụ thuộc vào những gì bạn muốn làm.