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>位于<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>之外且无效。所以我使用的HTML下面与你的有些不同，但我相信你只想要那个

<强> HTML：

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

JQuery代码：

{{1}}

Answer 2

尽管您的HTML有效性，您可以尝试这样做：

＆＃13;

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

＆＃13;

.hideBox {
  display:none;
}

＆＃13;

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

＆＃13;

如何找到最接近的事件元素

2 个答案: