Селектор jquery: как я могу использовать JQuery для выбора дочернего элемента родителя?

Question

Мне было интересно, как я могу использовать JQuery для выбора дочернего элемента родителя?

У меня есть следующее.

$("#navigation a.subpage").click(function () {
  $("#navigation ul ul")...

HTML выглядит следующим образом.

<li>
  <a class="subpage"...</a>
  <ul style="hidden">...</ul>
</li>

Мне нужно как-то выбрать родителей по ссылке. Это дало бы мне соответствующую информацию. Затем мне нужно выбрать ul и переключать его. Как мне это сделать?

Answer 1

Если это всегда следующий элемент, то .next() работает, если между ними может быть что-то промежуточное .siblings(), например:

$("#navigation a.subpage").click(function() {
  $(this).siblings('ul').toggle();
  return false;
});

Список функций обхода можно найти здесь :)

Answer 2

Проще говоря:

$("a.subpage").click(function() {
  $(this).next().toggle();
  return false;
});

this в обработчике событий является источником события, являющимся ссылкой.

Редактировать: проблемаили нет next() уместно.Конечно, если разметка отличается, вы используете другую цепочку.Есть много способов достижения того же результата, например:

$(this).siblings("ul").toggle();

Но что, если ссылка находится внутри абзаца?

$(this).closest("li").children("ul").toggle();

Но что еслисписок не является прямым потомком?

и т. д. и т. д. Все это разумные подходы, но сделайте его простым: напишите свой код jQuery в соответствии с разметкой, а не пытайтесь удовлетворить то, чего не происходити, вероятно, никогда не будет.

Answer 3

$(this).parent().find('ul').toggle()