Jquery nextUntil() won't match my elements

ESB691
June 3, 2023
198 views
0 votes
2 Answers

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

Tags: jquery nextuntil

Answers

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.

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.

Please signup or login to give your own answer.

Click here to cancel reply.