child - parent().parent() jquery

jQuery Parent Sibling selector

Question

Tengo un documento HTML como el siguiente:

<td>
  <div class="commentLink">
    <a href="javascript:ShowBox()">Show</a>
  </div>
  <div class="hiddenBox">
    <!-- Hidden content  -->
  </div>
</td>

El div con class = "hiddenBox" está oculto por defecto. Al hacer clic en el enlace "Mostrar", quiero mostrar el div oculto. Intenté esto pero no funciona.

function ShowBox() {
 $(function(){
  $(this).parent().siblings(".hiddenBox").show();
 });
}

La clase "hiddenBox" aparece varias veces en mi documento, pero solo quiero que se muestre el hermano.

Answer 1

El problema es que this en su función no será el elemento <a> . Puede cambiar su manejador en línea como este para solucionarlo:

<a href="#" onclick="ShowBox.call(this); return false;">Show</a>

Acabo de notar que, además, tendrá que hacer referencia a this fuera del controlador listo.

function ShowBox() {
   var that = this;
   $(function(){
       $( that ).parent().siblings(".hiddenBox").show();
   });
}

Supongo que lo ha configurado de esta manera en caso de que alguien haga clic en el enlace antes de que se cargue DOM.

Answer 2

Usa el más cercano http://api.jquery.com/closest/

Answer 3

parece que lo siguiente está mal

eliminar esa función dentro y debería funcionar

function ShowBox() {
  $(this).parent().siblings(".hiddenBox").show();
}

forma más elegante de hacer es

dale clase a href como "prueba"

 <a class="test">Show</a>

$(''.test'').click(function() {

    $(this).parent().siblings(".hiddenBox").show();
         return false;
});