Jquery nextUntil() won't match my elements

document.addEventListener('DOMContentLoaded', function() {
  collapsed = $(document).find('.off');
  collapsed.closest('table').nextUntil('.head', '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>

I would have wrote the HTML different, but anyways, without touching it, how can I -when the page finished loading- hide all the tr elements that don't have a class 'head', following a tr with class 'off', but stopping at any tr with class 'on'?

Solution

Consider the following.

document.addEventListener('DOMContentLoaded', function() {
  collapsed = $(document).find('.off');
  collapsed.nextUntil('.head', 'tr').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>

Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.

You were assigned to the Parent Element, so the siblings were not what was expected.