Utilizzo di "this" con i selettori jQuery

Question

Ho un po 'di HTML simile a questo:

<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 sto impostando il tag 'p' per visualizzare: none ;. Voglio usare jQuery per visualizzare o nascondere il tag 'p' quando si fa clic sull'ancoraggio, ma ho dei problemi con il selettore di pari livello.

Stavo solo cercando di far funzionare il selettore, ho provato:

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

per provarlo. Apparentemente, il selettore di pari livello non può davvero essere usato in quel modo, e dato che sono completamente nuovo in jQuery non conosco i mezzi appropriati per farlo accadere.

Grazie in anticipo!

Answer 1

Prova a usare:

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

Answer 2

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

la " p " sopra è facoltativo, se vuoi solo il nodo successivo non spazioso nel DOM.

Answer 3

  

Voglio usare jQuery per visualizzare o nascondere il tag 'p' quando si fa clic sull'ancoraggio

Dato che hai detto che ti piacerebbe attivare / disattivare il tag 'p' quando si fa clic sull'ancora, farei:

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