Mit „this“ mit jQuery Selektoren

Question

Ich habe einige HTML-Code, der wie folgt aussieht:

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

Mit CSS Ich gründe die 'p' Tag display: none ;. Ich mag jQuery verwenden, um den ‚p‘ Tag ein- oder ausblenden, wenn der Anker geklickt wird, aber ich habe einige Probleme mit dem Geschwister-Selektor aufweisen.

Ich versuche nur, den Wähler zum Laufen zu bringen, habe ich versucht:

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

um es zu testen. Scheinbar kann der Geschwister Wähler nicht wirklich so verwendet werden, und als ich jQuery ganz neu bin, weiß ich nicht die geeigneten Mittel, um dies zuzulassen.

Vielen Dank im Voraus!

Answer 1

Versuchen Sie es mit:

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

Answer 2

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

die "p" oben ist optional, wenn Sie die nächsten Nicht-Leerzeichen wollen nur den Knoten in dem DOM.

Answer 3

  

Ich möchte jQuery verwenden, um die ‚p‘ Tag ein- oder ausblenden, wenn der Anker geklickt wird

Da Sie erwähnt, dass Sie möchten, dass die ‚p‘ Tag wechseln, wenn der Anker geklickt wird, ich tun würde:

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