如何查找最近的事件元素

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

正如 Rory McCrossan 所建议的; 您的第一个hideBox直接出现在无效<table>标签中; 而第二个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")
    		.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>