Как выбрать первого предка, который соответствует селектору?
Общая информация:
Как я могу выбрать первого предка соответствия элемента в jQuery?
Пример:
Возьмите этот блок HTML
<table>
<tbody>
<tr>
<td>
<a href="#" class="remove">Remove</a>
</td>
</tr>
<tr>
<td>
<a href="#" class="remove">Remove</a>
</td>
</tr>
</tbody>
</table>
Я могу удалить строку в таблице путем нажатия на "Remove" с помощью этого кода jQuery:
$('.remove').click(function(){
$(this).parent().parent().hide();
return false;
});
Это работает, но это довольно хрупко. Если кто-то помещает <a> в a <div>, например, это повредилось бы. Есть ли селекторный синтаксис в jQuery, который следует за этой логикой:
"Вот элемент, теперь найдите самого близкого предка, который соответствует некоторым критериям выбора, и возвратите его"
Спасибо
4 ответа
Это будет ближайшим :
$(this).closest('tr').hide();
Вы можете передать селектор в аргумент parent, как я полагаю.
$('.remove').click(function(){
$(this).parents("tr:first").hide();
return false;
});
Или вы можете использовать closest, как указано в другом ответе.
$('.remove').click(function(){
$(this).closest("tr").hide();
return false;
});
Предполагая, что вы используете jQuery 1.4, вы можете использовать .parentsUntil(), который вернет всех предков до NOT, включая выбранного предка.
Так что в вашем случае я бы пошел с чем-то вроде этого:
$('.remove').click(function(){
$(this).parentsUntil("tr").parent().hide();
return false;
});
Я предпочитаю использовать ближайший как указывает @Kobi (+1), поскольку это кажется наиболее кратким способом сделать это. Напомню, что вы также можете использовать parent :
$(this).parents("tr:first")