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

Posted 2023-05-08

【中文标题】如何显示目标的祖父母的兄弟姐妹？

【英文标题】：How to show grandparent's sibling of target?

【发布时间】：2020-01-31 21:55:25

【问题描述】：

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

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

https://codepen.io/raion/pen/dybxmLK?editors=1111

https://codepen.io/raion/pen/dybxmLK

我可以用一个 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

【参考方案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>