jQuery - выберите родительский класс?

Question

Как выбрать <tr>, содержащий ребенка <div class="test">, как показано ниже?

<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.

Вот пример использования 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

Ниже цели родственного класса .test где-то в пределах своих детей и в ниже пример меняет фон на красный ...

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

Для меня это чрезвычайно эффективно при попытке настроить экспортированный html-код на indesign. Мощный, потому что indesign не позволяет вам теги, но через это вы можете пометить a, а затем через этот JQuery.

Answer 6

Используйте селектор: есть(), как:

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

Найти Jquery документации здесь :has() Selector