jQuery - wybierz rodzica według klasy dziecka?

Question

Jak mogę wybrać <tr> zawierający dziecko <div class="test">, jak poniżej?

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

Answer 1

Można użyć parents lub closest na to, w zależności od potrzeb:

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

(Początkowy selektor może być wszystko, co pasuje do Twojego div, więc ".test" byłoby w porządku.)

parents będzie wyglądać do samego drzewa, prawdopodobnie dopasowując wiele elementów tr, jeśli masz tabelę w tabeli. closest zatrzyma przy pierwszym tr napotka dla każdego z div s.

Oto przykład przy użyciu 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); 
    } 
}); 

wyjściowa:

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

Answer 2

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

ten wybiera dokładnie, co chcesz.

Answer 3

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

Answer 4

należy używać

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

na przykład:

http://jsfiddle.net/7T9nN/

Answer 5

cele poniżej rodzica z klasy .test gdzieś w swoich dzieci, a w poniżej przykład zmienia tło na czerwone ...

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

Dla mnie jest to niezwykle skuteczne, gdy próbujesz wyeksportować html z indesign. Potężne, ponieważ indesign nie pozwala ci na tagowanie, ale dzięki temu możesz oznaczyć a, a następnie poprzez to JQuery. selektor

Answer 6

Zastosowanie: ma() jak:

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

Znajdź dokumentację tutaj jQuery :has() Selector