Как в jQuery обратится к другому элементу родителя?

Question

[Erling]

Структура html следующая:

<ul>
  <li>
    <a class="link" href="#">...</a>
    <div class="text">Show this on .link hover</div>
  </li>
  <li>
    <a class="link" href="#">...</a>
    <div class="text">Show this on .link hover</div>
  </li>
  ...
</ul>

jQuery:

$(".link").on("mouseover mouseout", function(){
    $(".text").toggle();
  });

Т.е. при наведении мыши на .link надо показать .text для родителя ссылки, на которую навели (т.е. внутри LI). Сейчас у меня ивент срабатывает на все LI (естественно).

Answer 1

[Алексей Уколов]

Самый надёжный вариант:
$(this).closest('li').find(".text").toggle();
Он не сломается, когда поменяется структура html (в разумных пределах).

Есть ещё варианты, которые полагаются на взаимное расположение элементов:
$(this).parent().find(".text").toggle();
или
$(this).next(".text").toggle();

Эту же задачу можно решить и на css:

.link:hover + .text {
  display: block;
}

Answer 2

[Bowen]

$(this).next(".text")