Jquery nextUntil() won't match my elements

Question

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

`.not('head')` means: *"exclude any ``"*. Did you mean: *"exclude any element with the class of "head" as in `.not(".head")`"*? — zer00ne, Jun 02 '23 at 21:29

score 1 · Accepted Answer · answered Jun 02 '23 at 20:49

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.

Carsten Massmann · Answer 2 · 2023-06-03T04:06:05.060

As all .off sections with their content are to be hidden there are only .on heading sections left. In this context it might also be desirable to simply hide() all ".head" elements. This is done by .add()-ing them to the so far generated selection. I also shortened your code and turned it into into "jQuery style code":

$(function(){
  $('.off').nextUntil('.head').add(".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>1 Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>2 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>3 Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>4 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>5 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>6 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>7 Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

I also simplified your .nextUntil('.head','tr') expressions to .nextUntil('.head'), as tr elements are the only ones that can be found by the selection anyway.

Jquery nextUntil() won't match my elements

2 Answers2