NextUntil () in this case does not work

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 he 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 this class, use:

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

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

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

See the jQuery documentation for an additional reference and use of the nextUntil function.

Answer 2

this refers to the current tr element.

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

Your .find trying to search inside this set (therefore inside tr ). you can completely skip find , or if for some reason you think there might be other elements, use filter (or the second nextUntil parameter) nextUntil , which filters the current set.

So 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 the second parameter nextUntil )

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