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 .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();
});

— Олли
источник