Как найти ближайший элемент события

Question

Я использую jQuery. Я хочу найти ближайший класс .hidebox к элементу, который создал событие. Я пытался использовать parent, find и closest, но все они относятся к уровню моего элемента. Я просто ищу ближайший класс .hidebox, который я могу найти в элементе моего события.

<tr> 
    <td></td> 
    <td> 
     <a href="#" class="hideBox-tab " >show div</a> 
    </td> 
</tr> 
<div class="hideBox" ></div> 

<tr> 
    <td></td> 
    <td> 
     <a href="#" class="hideBox-tab " >show div</a> 
    </td> 
</tr> 
<tr> 
</td> 
    <div class="hideBox" ></div> 
</td> 
</tr> 

$(".hideBox-tab").click(function(){ 
    $(this) 
     .parent().parent() 
     .find(".hideBox") 
     .toggle(); 
    return false; 
}); 

Answer 1

Как предложил Рори McCrossan; ваш первый hideBox присутствует непосредственно в <table> тег, который недействителен; и 2 hideBox<td> присутствует за пределами <tr>, что также недействительно. Поэтому я использую ниже HTML, который несколько отличается от вашего, но я верю, что вы хотите, что только

HTML:

<tr> 
    <td></td> 
    <td> 
     <a href="#" class="hideBox-tab " >show div</a> 
    </td> 
    <td> 
     <div class="hideBox" ></div> 
    </td> 
</tr> 
<tr> 
    <td></td> 
    <td> 
     <a href="#" class="hideBox-tab " >show div</a> 
    </td> 
    <td> 
     <div class="hideBox" ></div> 
    </td> 
</tr> 

JQuery код:

$(".hideBox-tab").click(function(){ 
    $(this).closest("tr").find(".hideBox").toggle(); 
    return false; 
}); 

Answer 2

Несмотря на ваш HTML действительность вы можете попробовать сделать так:

$(".hideBox-tab").click(function(){ 
 
    $(this) 
 
     .closest("tr") 
 
     .next("tr") 
 
    \t \t .find(".hideBox") 
 
     .toggle(); 
 
    return false; 
 
});

.hideBox { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <a href="#" class="hideBox-tab">show div</a> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div class="hideBox">aaa</div>  
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <a href="#" class="hideBox-tab">show div</a> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div class="hideBox">bbb</div>  
 
    </td> 
 
    </tr> 
 
</table>