jQuery: seleccione la clase padre por hijo?

Question

¿Cómo puedo seleccionar el <tr> que contiene el niño <div class="test">, como se muestra a continuación?

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

Answer 1

Puede utilizar parents o closest para que, en función de sus necesidades:

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

(El selector inicial puede ser cualquier cosa que se adapte a su div, por lo ".test" estaría bien también.)

parents se verá todo el camino hasta el árbol, posiblemente coincida con múltiples elementos tr si tiene una tabla dentro de una tabla. closest se detendrá con el primer tr que encuentre para cada uno de los div s.

Aquí hay un ejemplo usando 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); 
    } 
}); 

Salida:

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

Answer 2

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

esto selecciona exactamente lo que quiere.

Answer 3

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

Answer 4

se debe utilizar

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

Por ejemplo:

http://jsfiddle.net/7T9nN/

Answer 5

El debajo de los objetivos a los padres con la clase de .test algún lugar dentro de sus hijos y en el El siguiente ejemplo cambia el fondo a rojo ...

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

Para mí, esto es extremadamente poderoso cuando intento apuntar html exportado desde indesign. Potente porque indesign no te permite etiquetar, pero a través de esto puedes etiquetar a y luego a través de este JQuery.

Answer 6

Uso del selector: tiene() como:

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

encontrar documentación de jQuery aquí :has() Selector