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

Question

У меня есть 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" встречается в моем документе несколько раз, но я хочу, чтобы только брат показывал.

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

Answer 2

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

Answer 3

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

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

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

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

дать некоторый класс для href как«тест»

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

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

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