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;
});