Usando & # 8220; este & # 8221; con jQuery Selectores
-
05-07-2019 - |
Pregunta
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!
Solución
Intenta usar:
$(this).siblings('p').css()
Otros consejos
$(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.
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
});