L'utilisation de “ce” avec des Sélecteurs jQuery

J'ai du code HTML qui ressemble à 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>

À l'aide de CSS, je suis réglage de la p tag display:none;. Je veux utiliser jQuery pour afficher ou masquer les p le tag de la anchor est cliqué, mais je vais avoir quelques problèmes avec le sélecteur de frères.

Juste essayer d'obtenir le sélecteur de travail, j'ai essayé:

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

de le tester. Apparemment, le sélecteur de frères ne peut pas vraiment être utilisé comme cela, et comme je suis complètement nouveau pour jQuery je ne sais pas le moyen approprié de faire que cela se produise.

InformationsquelleAutor ironkeith | 2008-10-29
  1. 37

    Essayez d'utiliser: 

    $(this).siblings('p').css()
    • Doux, c'est parfait (et beaucoup plus rapide qu'un assez stérile de recherche de Google). Merci!
    • lazyweb est génial n'est-ce pas? 🙂 Oh, et garder à l'esprit que cela ne sera que pour tous 'p' balise <li> si vous ajoutez plus.
    • alors vous devriez probablement utiliser des mon réponse ci-dessous 🙂 mais je ne suis pas amer...
    • Pas amer? Ne vous inquiétez pas, mon commentaire n'est pas constructif.
    • (5 ans plus tard...) Pour faire de vous Ben, j'ai signé pour NSScreencasts sur 6 mois et ont obtenu beaucoup d'elle ;-).
    InformationsquelleAutor swilliams
  2. 14
    $(this).next("p").css("...")

    le "p" ci-dessus est facultative, si vous voulez juste le côté non-blanc nœud du DOM.

    InformationsquelleAutor Ben Scheirman
  3. 7

    Je veux utiliser jQuery pour afficher ou masquer le 'p' de la balise lorsque l'ancre est cliqué

    Puisque vous avez mentionné que vous souhaitez basculer le 'p' de la balise lorsque l'ancre est cliqué, 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
  });
    • Ah, j'avais été demandais ce que la version jQuery de la consommation d'un événement de clic a été. Merci!
    • Hey merci, ça m'a sauvé d'avoir à réfléchir plus loin! J'ai fini par aller avec slideToggle() à la place de show() mais, pour la plupart, parce que je veux que les gens pense que je suis cool. 😉
    • Content d'avoir pu aider! =-)
    InformationsquelleAutor Gabe Hollombe