结合使用“ this”和jQuery Selectors

Question

I have some HTML that looks like this:

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

Using CSS I'm setting the p tag to display:none; . I want to use jQuery to display or hide the p tag when the anchor is clicked, but I'm having some troubles with the sibling selector.

Just trying to get the selector working, I tried:

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

to test it out. Seemingly, the sibling selector can't really be used like that, and as I'm completely new to jQuery I don't know the appropriate means to make that happen.

Answer 1

尝试使用：

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

Answer 2

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

如果您只想要DOM中的下一个非空白节点，则上面的“ p”是可选的。

Answer 3

I want to use jQuery to display or hide the 'p' tag when the anchor is clicked

Since you mentioned that you'd like to toggle the 'p' tag when the anchor is clicked, I'd do:

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