En utilisant & # 8220; this & # 8221; avec les sélecteurs jQuery

Question

J'ai du code HTML ressemblant à ceci:

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

En utilisant CSS, je mets la balise 'p' à afficher: none ;. Je souhaite utiliser jQuery pour afficher ou masquer la balise 'p' lorsque l'utilisateur clique sur l'ancre, mais je rencontre des problèmes avec le sélecteur frère.

En essayant de faire fonctionner le sélecteur, j'ai essayé:

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

pour le tester. Apparemment, le sélecteur de fratrie ne peut pas vraiment être utilisé comme ça, et comme je suis complètement novice dans jQuery, je ne connais pas les moyens appropriés pour y arriver.

Merci d'avance!

Answer 1

Essayez d’utiliser:

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

Answer 2

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

le " p " ci-dessus est facultatif, si vous voulez juste le prochain nœud non-blanc du DOM.

Answer 3

  

Je souhaite utiliser jQuery pour afficher ou masquer la balise 'p' lorsque l'utilisateur clique sur l'ancre

Étant donné que vous avez indiqué que vous souhaitez basculer la balise 'p' lorsque vous cliquez sur l'ancre, je le ferais:

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