Usando “isto” com jQuery seletores

Question

Eu tenho alguns HTML que se parece com isso:

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

Usando CSS Eu estou definindo a tag 'p' para display: none ;. Eu quero usar jQuery para exibir ou ocultar a tag 'p' quando a âncora é clicado, mas eu estou tendo alguns problemas com o seletor irmão.

Apenas tentando obter o trabalho seletor, eu tentei:

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

para testá-lo. Aparentemente, o seletor irmão não pode realmente ser usado como esse, e como eu sou completamente novo para jQuery Eu não sei os meios adequados para que isso aconteça.

Agradecemos antecipadamente!

Answer 1

Tente usar:

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

Answer 2

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

o "p" acima é opcional, se você quiser apenas o próximo nó não-espaço em branco no DOM.

Answer 3

Eu quero usar jQuery para exibir ou ocultar a tag 'p' quando a âncora é clicada

Uma vez que você mencionou que você gostaria de alternar a tag 'p' quando a âncora é clicado, eu faria:

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