jQuery - chọn cha mẹ theo lớp con?

Question

Làm cách nào để chọn số <tr> chứa trẻ em <div class="test">, như sau?

<table> 
<tr> <!-- this tr is what I want to select --> 
<td> 
<div class="test"> text </div> 
</td> 
</tr> 
</table> 

Answer 1

Bạn có thể sử dụng parents hoặc closest cho rằng, tùy thuộc vào nhu cầu của bạn:

$("div.test").parents("tr"); 
// Or 
$("div.test").closest("tr"); 

(Bộ chọn ban đầu có thể được bất cứ điều gì phù hợp với div của bạn, vì vậy ".test" sẽ là tốt quá.)

parents sẽ nhìn toàn bộ cây lên, có thể khớp với nhiều phần tử tr nếu bạn có bảng trong bảng. closest sẽ dừng với số tr đầu tiên mà nó gặp phải đối với mỗi số div giây.

Dưới đây là một ví dụ sử dụng closest:

Live copy | Live source

HTML:

<table> 
<tr id="first"> <!-- this tr I want to select --> 
<td> 
<div class="test"> text </div> 
</td> 
</tr> 
<tr id="second"> <!-- this tr I want to select --> 
<td> 
<div class="test"> text </div> 
</td> 
</tr> 
<tr id="third"> <!-- this tr I want to select --> 
<td> 
<div class="test"> text </div> 
</td> 
</tr> 
</table> 

JavaScript:

jQuery(function($) { 

    var rows = $("div.test").closest("tr"); 
    display("Matched " + rows.length + " rows:"); 
    rows.each(function() { 
    display("Row '" + this.id + "'"); 
    }); 

    function display(msg) { 
    $("<p>").html(msg).appendTo(document.body); 
    } 
}); 

Output:

Matched 3 rows: 
Row 'first' 
Row 'second' 
Row 'third'

Answer 2

$('.test').parent('tr') 

này lựa chọn chính xác những gì bạn muốn.

Answer 3

$('.test').parent().parent(); hoặc $('.text').parent().closest('tr');

Answer 4

bạn nên sử dụng

$('.test').parents('tr'); 

Ví dụ:

http://jsfiddle.net/7T9nN/

Answer 5

dưới đây nhắm vào phụ huynh với lớp của .test nơi nào đó trong con của nó và trong bên dưới ví dụ thay đổi nền thành màu đỏ ...

$(document).ready(function(){ 
$('.test').parents('tr').css('background-color', 'red'); 
}); 

Đối với tôi điều này cực kỳ mạnh mẽ khi cố gắng nhắm mục tiêu html được xuất từ ​​thiết kế. Mạnh mẽ bởi vì indesign không cho phép bạn gắn thẻ nhưng thông qua điều này bạn có thể gắn thẻ một và sau đó thông qua JQuery này.

Answer 6

Sử dụng selector: có() như:

$("tr:has(div.test)"); 

Tìm jQuery tài liệu ở đây :has() Selector