Usando & # 8220; este & # 8221; con jQuery Selectores

Question

Tengo algunos HTML que se parecen a esto:

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

Usando CSS, estoy configurando la etiqueta 'p' para mostrar: ninguna ;. Quiero usar jQuery para mostrar u ocultar la etiqueta 'p' cuando se hace clic en el ancla, pero tengo algunos problemas con el selector de hermanos.

Intentando que el selector funcione, lo intenté:

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

para probarlo. Al parecer, el selector de hermanos no se puede usar de esa manera, y como soy completamente nuevo en jQuery, no conozco los medios adecuados para que eso suceda.

Gracias de antemano!

Answer 1

Intenta usar:

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

Answer 2

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

la " p " lo anterior es opcional, si solo desea el siguiente nodo que no sea un espacio en blanco en el DOM.

Answer 3

  

Quiero usar jQuery para mostrar u ocultar la etiqueta 'p' cuando se hace clic en el ancla

Ya que mencionaste que te gustaría cambiar la etiqueta 'p' cuando se hace clic en el ancla, lo haría:

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