jQuery Selectors와 함께 "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'태그를 표시하도록 설정합니다. 앵커를 클릭 할 때 jQuery를 사용하여 'P'태그를 표시하거나 숨기고 싶지만 형제 자매 선택기와 약간의 문제가 있습니다.

선택기를 작동 시키려고 노력하면서 시도했습니다.

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

테스트하려면. 겉보기에는 형제 자매 선택기는 실제로 그렇게 사용할 수 없으며, jQuery를 완전히 처음 접을 수 있으므로 그 일을 할 수있는 적절한 수단을 모릅니다.

미리 감사드립니다!

Answer 1

사용해보십시오 :

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

Answer 2

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

위의 "P"는 선택 사항입니다. DOM에서 다음이 아닌 비 스페이스 노드를 원한다면 선택 사항입니다.

Answer 3

앵커를 클릭 할 때 jQuery를 사용하여 'P'태그를 표시하거나 숨기고 싶습니다.

앵커를 클릭 할 때 '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
  });