jQuery - 按子類選擇父類？

Question

如何選擇含有孩子<div class="test">的<tr>，如下？

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

Answer 1

您可以使用該parents或closest，根據您的需要：

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

（最初的選擇可以是任何東西，你的div相匹配，所以".test"將被罰款了。）

parents看起來一路上漲的樹，可能匹配多個tr元素，如果你有一個表內的表。 closest將停止，並遇到div的每個tr。

下面是一個使用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); 
    } 
}); 

輸出：

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

Answer 2

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

這種選擇正是你想要的。

Answer 3

$('.test').parent().parent();或$('.text').parent().closest('tr');

Answer 4

你應該使用

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

例如：

http://jsfiddle.net/7T9nN/

Answer 5

的下面內的兒童和在某處類的。測試目標的父以下示例將背景更改爲紅色...

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

對我努力的目標從InDesign導出HTML時，這是非常強大的。強大，因爲indesign不會讓你標記，但通過這個你可以標記一個，然後通過這個JQuery。

Answer 6

使用選擇：有（），如：

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

在這裏找到jQuery文檔:has() Selector