JQuery Родительский селектор

У меня есть документ HTML, как показано ниже:

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

По умолчанию скрывается div с class= "hiddenBox". При нажатии на ссылку "Показать" я хочу показать скрытый div. Я пробовал это, но он не работает.

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

Класс "hiddenBox" встречается несколько раз в моем документе, но я хочу показать только сиблингу.

Ответ 1

Проблема в том, что this в вашей функции не будет элементом <a>. Вы можете изменить свой встроенный обработчик следующим образом:

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

А просто заметил, кроме того, вам нужно будет ссылаться на this вне готового обработчика.

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

Я предполагаю, что вы настроили его таким образом, если кто-то щелкнет ссылку до загрузки DOM.

Ответ 2

Использовать ближайший http://api.jquery.com/closest/

Ответ 3

выглядит следующим образом:

удалить эту функцию внутри, и она должна работать

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

более элегантный способ сделать это

дать некоторый класс href как "test"

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

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

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