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

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的“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. 使用最接近获取按钮的父tr然后使用next然后找到目标表的表

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

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

我看到你正在隐藏表名为'partTableContent'的table元素。这实际上是你通过调用<tr>得到的$(this).parent().next()元素的孩子

$(document).ready(function() { 
$('.partTableContent').hide(); 
$('.expandButton').click(function() {  
  $(this).parent().parent().next().children().children('.partTableContent').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>