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

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 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＆＃39; slideToggles＆＃39;此表中只有下一个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

请考虑我有很多＆＃34; partsTable＆＃34;我的目标是让所有人都可以扩展相应的子表。谢谢提前

Answer 1

1. 在表格中添加td。
2. 使用最接近获取按钮的父tr然后使用next然后找到要定位表的表
＆＃13;
＆＃13;
$(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);
  });
});
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

使用closest()获取父表并使用find()查找子表，从而消除了使用next()或tr进行遍历的麻烦：

closest('table.partsTable').find('table.partTableContent')

$(document).ready(function() {
  $('.partTableContent').hide();
  $('.expandButton').click(function() {
    $(this).closest('table.partsTable').find('table.partTableContent').slideToggle(1000);
  });
});

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

Answer 3

我看到你隐藏了表名为＆＃39; partTableContent＆＃39;的表格元素。这实际上是调用<tr>

时获得的$(this).parent().next()元素的子元素

＆＃13;

＆＃13;

$(document).ready(function() { 
$('.partTableContent').hide(); 
$('.expandButton').click(function() {  
  $(this).parent().parent().next().children().children('.partTableContent').slideToggle(200); }); 
  }
);

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;