jQuery: как добраться до конкретного потомка родителя?

92

В качестве упрощенного примера, у меня на странице много раз повторяется следующий блок (он генерируется динамически):

<div class="box">
   <div class="something1"></div>
   <div class="something2">
      <a class="mylink">My link</a>
   </div>
</div>

При нажатии я могу перейти к родительскому элементу ссылки с помощью:

$(".mylink").click(function() {
   $(this).parents(".box").fadeOut("fast");
});

Однако ... мне нужно добраться до <div class="something1">этого конкретного родителя.

В принципе, может ли кто-нибудь сказать мне, как обращаться к брату или сестре более высокого уровня, не имея возможности ссылаться на него напрямую? Назовем его старшим братом. Прямая ссылка на имя класса старшего брата приведет к исчезновению каждого экземпляра этого элемента на странице, что не является желаемым эффектом.

Я пытался:

parents(".box .something1") ... no luck.
parents(".box > .something1") ... no luck.
siblings() ... no luck.

Кто угодно? Спасибо.

jquery jquery-selectors parent siblings Том
источник
Ответ Анурага может показаться неправильным - он определенно заставил меня остановиться и задуматься - но он указывает на вопиющую опечатку в вашем коде, из-за которой ваш селектор не работает. Селектора в jQuery .parent() нет .parents()
Дэвид говорит, что нужно восстановить Монику
@ricebowl: Неправильно. api.jquery.com/parents
SLaks
@ricebowl ... parent () дал бы мне div something2, поэтому мне нужны родители (), чтобы добраться до блока div.
Tom
Ах; мои извенения. Умм ... Я не знаю, лучше ли оставить свое невежество на виду или удалить ошибку, чтобы никого не расстраивать ... = | Тем не менее, по крайней мере, сегодня я узнал кое-что полезное; в том-то и дело, да ..? =)
Дэвид говорит, что нужно восстановить Монику
1
@ricebowl, не беспокойтесь, спасибо за участие.
Том

Ответы:

145

Вызов .parents(".box .something1")вернет все родительские элементы, соответствующие селектору .box .something. Другими словами, он вернет родительские элементы, которые .something1находятся внутри .box.

Вам нужно получить потомков ближайшего родителя, например:

$(this).closest('.box').children('.something1')

Этот код вызывает .closestсамый внутренний родительский элемент, соответствующий селектору, а затем вызывает .childrenэтот родительский элемент, чтобы найти дядю, которого вы ищете.

SLaks
источник
Я знаю, что это немного устарело, но не лучше ли в этом случае использовать parent (), а не closest (), поскольку я полагаю, что с помощью closest () больше обхода дерева ?
rmorse
1
@acSlater: ему нужен обход дерева. parent()это неправильный элемент.
SLaks
Ах да, Том должен извиниться за parent (). Parent ()! :)
rmorse
1
@acSlater: Да; это сработает. Однако это делает Javascript более связанным со структурой HTML. .closest(...)более устойчивый и более читаемый.
SLaks
8
В случае, если кому-то интересно: после того, как вы нашли правильного родителя с помощью .closest (), если вы ищете дочерний элемент, который НЕ является прямым дочерним элементом (например, дочерним элементом дочернего элемента), просто используйте. find () вместо .children.
Fabien Snauwaert
17 
$(this).parent()

Обход дерева - это весело

$(this).parent().siblings(".something1");

$(this).parent().prev(); // if you always want the parent's previous sibling

$(this).parents(".box").children(".something1");

И гораздо больше способов, вы можете найти эти документы полезны.

Анураг
источник
Спасибо, но искал не родителя, а другого ребенка родителя (или бабушки или дедушки на самом деле).
Том
Хе-хе ... это действительно семейное дело.
Том
13

Это найдет первого родителя с классом, boxзатем найдет первый дочерний класс с сопоставлением регулярного выражения somethingи получит идентификатор.

$(".mylink").closest(".box").find('[class*="something"]').first().attr("id")
user2601995
источник
6

Если я правильно понял вашу проблему, $(this).parents('.box').children('.something1')это то, что вы ищете?

Теджа Кантамнени
источник
5

Вы можете использовать .each()with .children()и селектор в скобках:

//Grab Each Instance of Box.
$(".box").each(function(i){

    //For Each Instance, grab a child called .something1. Fade It Out.
    $(this).children(".something1").fadeOut();
});
Олли
источник