JQuery nextUntil()匹配失败，如何实现指定表格行隐藏？

需求说明 #

页面加载完成后，隐藏所有紧跟在class为head off的<tr>元素之后、且在class为head on的<tr>元素之前的非head类<tr>元素，且不能修改现有HTML结构。

原代码问题分析 #

你当前的代码逻辑有误，导致nextUntil()没达到预期效果：

• collapsed.closest('table')是获取.off元素所在的整个表格，而非从.head.off的<tr>元素开始查找后续元素
• .not('head')写法错误，这里要排除的是带head类的元素，应该写成.not('.head')

正确实现代码 #

$(document).ready(function() {
  // 遍历所有class为head off的tr元素
  $('.head.off').each(function() {
    // 从当前tr开始，找到下一个.head.on之前的所有非head类tr并隐藏
    $(this).nextUntil('.head.on', 'tr:not(.head)').hide();
  });
});

完整代码示例 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr class="head on">
    <td><a class="ln-head" href="#">Header On</a></td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr class="head off">
    <td><a class="ln-head" href="#">Header Off</a></td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr class="head on">
    <td><a class="ln-head" href="#">Header On</a></td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr class="head off">
    <td><a class="ln-head" href="#">Header Off</a></td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr class="head on">
    <td><a class="ln-head" href="#">Header On</a></td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

代码说明 #

1. 使用$(document).ready()确保DOM加载完成后执行逻辑（和DOMContentLoaded效果一致，更符合jQuery写法）
2. 遍历每个.head.off的<tr>，对每个目标表头单独处理
3. nextUntil('.head.on', 'tr:not(.head)')精准筛选：
   • 第一个参数'.head.on'：指定终止条件，找到下一个head on的行就停止
   • 第二个参数'tr:not(.head)'：只选取非head类的表格行，避免误操作表头行

内容的提问来源于stack exchange，提问作者ESB691