javascript - jQueryセレクターで「this」を使用する

Question

次のようなHTMLがあります。

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

CSSを使用して、pタグをに設定していdisplay:none;ます。jQueryを使用して、がクリックさpれたときにタグを表示または非表示にしたいのですが、兄弟セレクターに問題があります。anchor

セレクターを機能させようとして、私は次のことを試しました。

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

それをテストします。どうやら、兄弟セレクターは実際にはそのように使用することはできません。私はjQueryにまったく慣れていないため、それを実現するための適切な手段がわかりません。

Answer 1

使用してみてください：

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

Answer 2

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

DOM内の次の非空白ノードが必要な場合は、上記の「p」はオプションです。

Answer 3

アンカーがクリックされたときに「p」タグを表示または非表示にするためにjQueryを使用したい

アンカーがクリックされたときに「p」タグを切り替えたいとおっしゃっていたので、次のようにします。

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