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

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

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

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

Ответы

Ответ 1

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

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

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

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

Ответ 2

$(this).parent()

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

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

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

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

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

Ответ 3

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

$(".mylink").closest(".box").find('[class*="something"]').first().attr("id")

Ответ 4

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

Ответ 5

Вы можете использовать .each() с .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();
});