如何显示目标的祖父母的兄弟姐妹？答案

【问题标题】：How to show grandparent's sibling of target?如何显示目标的祖父母的兄弟姐妹？
【发布时间】：2020-01-31 21:55:25
【问题描述】：

我想知道如何获取目标的父级兄弟。

我希望在单击 button.btn 时切换幻灯片 tr.show-hide。

我可以用一个 ID 一个一个地做到这一点。但我想知道如何为每个按钮编写一个功能，以防我需要超过 20 或 30 个按钮。

<table>
  <tr class="toggle">
    <td> <button class="btn">toggle1</button> </td>
  </tr>

  <tr class="show-hide">
    <td>-----1111------</td>
  </tr>

  <tr class="toggle">
    <td> <button class="btn">toggle2</button> </td>
  </tr>

  <tr class="show-hide">
    <td>-----2222------</td>
  </tr>

</table>

<table class="table1">
  <tr class="table1__row">
    <th>table 1 - th1 </th>
    <td>table 1 - td </td>
  </tr>

  <tr class="table1__row">
    <th>table 1 - th2 </th>
    <td>

      <table class="table2">
        <tr class="table2__row toggle">
        <th> table 2 - th1</th>
          <td> <button class="btn">toggle1</button></td>
        </tr>

        <tr class="show-hide">
          <th></th>
          <td>-----1111------</td>
        </tr>

        <tr class="table2__row toggle">
          <th> table 2 - th2 </th>
          <td> <button class="btn">toggle2</button> </td>
        </tr>

        <tr class="show-hide">
          <th></th>
          <td>-----2222------</td>
        </tr>

      </table>

    </td>
  </tr>
</table>

【问题讨论】：

$(e.target).closest('.toggle').next('.show-hide').dostuff()
closest() 找到祖先，find() 找到后代，next() 获得下一个兄弟，prev() 获得上一个兄弟。所有这些方法都在 API 中有详细说明。 api.jquery.com/category/traversing

标签： javascript jquery

【解决方案1】：

nextUntil() 是如果有不止一行，你所追求的。或者你只需要 next() 如果它只是一行。

$("table").on("click", ".toggle", function() {
  $(this).nextUntil(".toggle").toggleClass("active")
})

.show-hide {
  display: none;
}

.show-hide.active {
  display: table-row;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr class="toggle">
    <td> <button class="btn">toggle1</button> </td>
  </tr>

  <tr class="show-hide">
    <td>-----1111------</td>
  </tr>

  <tr class="toggle">
    <td> <button class="btn">toggle2</button> </td>
  </tr>

  <tr class="show-hide">
    <td>-----2222------</td>
  </tr>

  <tr class="toggle">
    <td> <button class="btn">toggle3</button> </td>
  </tr>

  <tr class="show-hide">
    <td>-----3a------</td>
  </tr>
  <tr class="show-hide">
    <td>-----3b------</td>
  </tr>

  <tr class="toggle">
    <td> <button class="btn">toggle4</button> </td>
  </tr>

  <tr class="show-hide">
    <td>-----4------</td>
  </tr>

</table>

【讨论】：

非常感谢！！它运行良好。问题是它不适用于codepen.io/raion/pen/dybxmLK 这个。如果 btn 在 2 个表中有可能吗？

【解决方案2】：

这是fiddle with your code（2 个表格中的按钮）

我更改了 jQuery 代码以在单击实际切换本身时侦听单击事件。

接下来，您的小提琴中缺少显示/隐藏样式：

.show-hide.active { display: table-row;; }

$(".toggle").on("click", function() {
  $(this).nextUntil(".toggle").toggleClass("active")
})

table {
   border-collapse: collapse;
  border:1px solid #000;
}

th, td {
  padding : 1em;
}

.table1__row > th {
  background : lemonchiffon;
  border: 1px solid black;
}

.table1__row > td {
  background : #DDD;
  border: 1px solid black;
}

.table2__row > th {

}
.show-hide {
   display: none;
}

.show-hide.active {
  display: table-row;;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table1">
  <tr class="table1__row">
    <th>table 1 - th1 </th>
    <td>table 1 - td </td>
  </tr>

  <tr class="table1__row">
    <th>table 1 - th2 </th>
    <td>
      
      <table class="table2">
        <tr class="table2__row toggle">
        <th> table 2 - th1</th>
          <td> <button class="btn">toggle1</button></td>
        </tr>

        <tr class="show-hide">
          <th></th>
          <td>-----1111------</td>
        </tr>

        <tr class="table2__row toggle">
          <th> table 2 - th2 </th>
          <td> <button class="btn">toggle2</button> </td>
        </tr>

        <tr class="show-hide">
          <th></th>
          <td>-----2222------</td>
        </tr>

      </table>

    </td>
  </tr>


</table>

【讨论】：