Использование «this» с селекторами jQuery

Question

У меня есть некоторый HTML, который выглядит так:

<ul class="faq">
    <li class="open">
        <a class="question" href="">This is my question?</a>
        <p>Of course you can, it will be awesome. </p>
    </li>
</ul>

Используя CSS, я устанавливаю тег 'p' для отображения: нет ;. Я хочу использовать jQuery для отображения или скрытия тега 'p' при нажатии на ссылку, но у меня возникли некоторые проблемы с селектором родного брата.

Просто пытаясь заставить работать селектор, я попытался:

$("a.question").click(function () {
    $(this + " ~ p").css("background-color", "red");
});

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

Заранее спасибо!

Answer 1

Попробуйте использовать:

$(this).siblings('p').css()

Answer 2

$(this).next("p").css("...")

указанная выше буква "p" является необязательной, если вы просто хотите следующий узел без пробелов в DOM.

Answer 3

Я хочу использовать jQuery для отображения или скрытия тега 'p' при нажатии на ссылку

Поскольку вы упомянули, что вы хотите переключать тег 'p' при щелчке якоря, я бы сделал:

  $("a.question").click(function (event) {
      $(this).siblings('p').show(); //toggle the p tags that are siblings to the clicked element
      event.preventDefault(); //stop the browser from following the link
  });