nextUntil() is not working in this case

Question

<table>
  <tr class="codesgroupheader"><td>Header1</td></tr>
  <tr><td>1</td></tr>
  <tr class="codesgroupheader"><td>Header2</td></tr>
  <tr><td>2</td></tr>
  <tr class="codesgroupheader"><td>Header3</td></tr>
  <tr><td>3</td></tr>
  <tr class="codesgroupheader"><td>Header4</td></tr>
</table>

And here is the jQuery code

$('.codesgroupheader').not(':last').each(function() {
   alert($(this).nextUntil('.codesgroupheader').find('tr').size());
});

But It always returns me zero..

Answer 1

Your code does the following:

$(this)                        // <tr>           <-- = this
.nextUntil('.codesgroupheader')// All elements between this and <tr class="...">
.find('tr')                    // Seeks for a <tr> inside <tr> - Not found

If you want to select the number of <tr> elements with the given class, use:

alert($('tr.codesgroupheader').not(':last').length);

If you want to get the number of <tr>s between the current and next <tr class=...>, use:

// this = any <tr>
$(this).nextUntil(".codesgroupheader", "tr").length;

For additional reference and usage of the nextUntil function, see the jQuery documentation.

Answer 2

this refers to the current tr element.

nextUntil('.codesgroupheader') will find all elements between this and the next tr.codesgroupheader.

Your .find tries to search inside that set (so inside the tr). you can skip the find completely, or if for some reason you believe there can be other elements in there, use filter instead (or the second parameter to nextUntil), which filters the current set.

So either use

$('.codesgroupheader').not(':last').each(function() {
   alert($(this).nextUntil('.codesgroupheader').size());
});

or to filter

$('.codesgroupheader').not(':last').each(function() {
   alert($(this).nextUntil('.codesgroupheader').filter('tr').size());
});

or (using second parameter of nextUntil)

$('.codesgroupheader').not(':last').each(function() {
   alert($(this).nextUntil('.codesgroupheader', 'tr').size());
});