javascript - 如何选择当前元素的下一个元素

Question

我的目标是让展开按钮显示从 tr 标签开始的内表。我试过像这样使用 JQuery 来做到这一点:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
    $(document).ready(function(){
        $('.partTableContent').hide();
        $('.expandButton').click(function(){
            // .parent() selects the A tag, .next() selects the P tag
            $(this).parent().next().slideToggle(200);
        });
    });
</script>

我用的 table

    <table class="partsTable" border="1px">
    <tr>
        <td class="sideForPartsTable" width="5%"><button class="expandButton">Expand button</button></td>
        <td class="sideForPartsTable">Title + sum1 + sum2</td>
        <td class="sideForPartsTable" width="5%">edit</td>
        <td class="sideForPartsTable" width="5%">remove</td>
    </tr>
    <tr>
        <table class="partTableContent">
            <tr>
                <td> Test1 </td>
            </tr>
            <tr>
                <td> Test2 </td>
            </tr>
        </table>
    </tr>
</table>

但它并没有按照预期的方式工作。我知道 JQuery 'slideToggles' 仅在该表内的下一个 td 标记。我也试过这样的东西

$(document).ready(function(){
    $('.partTableContent').hide();
    $('.expandButton').click(function(){
        // .parent() selects the A tag, .next() selects the P tag
        $(this).parent().nextAll('table:first').slideToggle(200);
    });
});

但它也不起作用:c

请考虑我有很多“partsTable”，我的目标是让它们都能工作，只扩展相应的子表。提前致谢

Answer 1

1. 在表中添加 td。
2. 使用closest获取button的parent tr然后使用next然后找到table来定位table

$(document).ready(function() {
  $('.partTableContent').hide();
  $('.expandButton').click(function() {
    // .parent() selects the A tag, .next() selects the P tag
    $(this).closest('tr').next(' tr').find('table').slideToggle(200);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="partsTable">

  <tr>

    <td class="sideForPartsTable" width="5%">
      <button class="expandButton">Expand button</button>
    </td>
    <td class="sideForPartsTable">Title + sum1 + sum2</td>
    <td class="sideForPartsTable" width="5%">edit</td>
    <td class="sideForPartsTable" width="5%">remove</td>

  </tr>

  <tr>
    <td>
      <table class="partTableContent">
        <tr>
          <td> Test1 </td>
        </tr>
        <tr>
          <td> Test2 </td>
        </tr>
      </table>
    </td>
  </tr>

</table>