jquery - 仅选择动态生成的表中的下一个

Question

我正在通过 SQL/php 生成一个表。它输出一个 .data-row和一个 .admin-row在每个循环中。当我单击编辑图标时 <i class='edit-button'></i> , 我 只有需要它打开下.admin-row编辑图标所在的正下方(截图)。

现在，我正在使用这个 jQuery 代码，它打开 全部 .admin-row类元素。

  $('.edit-button').click(function() {
    $('#dataTable').find('.admin-row').toggleClass('d-none');
  });

我已经尝试过 .next(), .parent(), .find()但不能让它只打开下一个 .admin-row在编辑按钮之后。

<?php
<table> ... / table head...

foreach($result as $row) {

echo "<tr class='data-row'>";
  echo "<td>".$date_form."</td>
  echo "<td>".$time_form."</td>
  echo "<td>".$subject_form."</td>
  echo "<td>".$public."</td>
if ($userUid == "admin") {
  echo "<td><i class='edit-button'></i></td>";
                   }
echo "</tr>";

if ($userUid == "admin") { ?>

<tr class='admin-row'>
  <form action="includes/update.inc.php" type="post">
    <td><input name="editId" type="text"></td>
    <td class='p-2' colspan="4">
      <textarea name="editContent" type="text"></textarea>
    </td>
    <td><button name="submit-edit" type="submit">EDIT</button></td>
  </form>
</tr>

 <?php }}?>
</table>

Answer 1

您可以使用 .closest() 像这样的方法:

$('.edit-button').click(function() {
  $(this).closest('.data-row').next('.admin-row').toggleClass('d-none');
});

问题是编辑按钮在另一行和 admin-row是不同的行。

我在演示中也发现，没有添加类似 d-none 的类.所以，我添加了一个:

.d-none {display: none}

工作演示:

$('.edit-button').click(function() {
  $(this).closest('.data-row').next('.admin-row').toggleClass('d-none');
});

.d-none {display: none}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="dataTable" border="1">
  <tr class="data-row">
    <td>Time/date</td>
    <td>Lorem Ipsum Lorem Ipsum Lorem Ipsum </td>
    <td><button class="edit-button" type="button">Edit
      </button>
    </td>
  </tr>
  <tr class="admin-row">
    <td>Data1</td>
    <td>Data2</td>
    <td>Data3</td>
  </tr>
  <tr class="data-row">
    <td>Time/date</td>
    <td>Lorem Ipsum Lorem Ipsum Lorem Ipsum </td>
    <td><button class="edit-button" type="button">Edit
      </button>
    </td>
  </tr>
  <tr class="admin-row">
    <td>Data1</td>
    <td>Data2</td>
    <td>Data3</td>
  </tr>
</table>