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は、最初にtrで停止し、divのそれぞれについて遭遇します。 |

Live copy：

はここclosestを使った例です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') 

これは正確に何をしたい選択します。あなたが例えば

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

を使用する必要があります

Answer 3

$('.test').parent().parent();または$('.text').parent().closest('tr');

Answer 4

：

http://jsfiddle.net/7T9nN/

Answer 5

以下は、どこかその子の中とで.TESTのクラスと親を対象下の例では背景が赤に変わります...

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

indesignからエクスポートされたhtmlをターゲットにしようとすると、これは非常に強力です。強力なのはindesignがタグ付けすることはできませんが、これを使ってタグ付けしてからこのJQueryを使用することができます。

Answer 6

使用セレクタ：）（ありのような：

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

ここでjQueryのドキュメント:has() Selector

を探します