Count number of table rows between two specific rows with jQuery

Question

<table>
  <tr id="parent_1">
    <td>Parent 1</td>
  </tr>
  <tr class="child">
    <td>Child 1</td>
  </tr>
  <tr class="child">
    <td>Child 2</td>
  </tr>
  ...
  <tr id="parent_2">
    <td>Parent2</td>
  </tr>
  ...
</table>

How can I find the number of child rows between parent_1 and parent_2 using jQuery?

Edit: Sorry, didn't make it clear that this is just an example, the table could contain any number of parent rows, and any number of child rows

Chatuman's solution is the best compromise between brevity and performance. — vladr
– vladr, Commented Mar 5, 2009 at 0:28

Chatu · Accepted Answer · 2009-03-05 00:23:47Z

16

This will get you what you want

var childCount = ($('#parent_2').get(0).rowIndex - $('#parent_1').get(0).rowIndex) - 1;

answered Mar 5, 2009 at 0:23

Chatu

4,7984 gold badges25 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

vladr Over a year ago

+1 excellent! but why bother with intermidiaries? Hit the API directly: document.getElementById('parent_2').rowIndex - document.getElementById('parent_1').rowIndex - 1;

Crescent Fresh Over a year ago

Nice answer. Plus, @Vlad is right: jQuery gives you nothing in this case.

bobince Over a year ago

+1 Vlad's comment! Of course this assumes there are no other rows in between which are neither ‘parent’ nor ‘child’, which is probable but the question's not entirely clear.

Miles · Accepted Answer · 2009-03-04 23:59:58Z

11

This:

$('#parent_1 ~ .child:not(#parent_2 ~ *)').size()

Translation: match all elements of class child that are a sibling of, and come after, #parent_1, but not those that are a sibling of and come after #parent_2.

answered Mar 4, 2009 at 23:59

Miles

32.7k7 gold badges69 silver badges77 bronze badges

6 Comments

Samantha Branham Over a year ago

This was what I was hoping someone would think of. Thanks for teaching me something! ;)

Crescent Fresh Over a year ago

@Vlad: jQuery doesn't use XPATH.

Miles Over a year ago

It's a CSS 3 selector, not XPath, but your point stands—this is probably not the most efficient solution.

vladr Over a year ago

@crescentfres - I stand corrected, sorry, I had Prototype in mind; but the selector above will still do an order of magnitude more work (i.e. calls to the DOM API) than Chatuman's solution according to the jQuery source code. :)

vladr Over a year ago

@Miles, sorry, my mind was at Prototype which will attempt to use the browser's built-in xpath support (document.evaluate functionality)

|

Samantha Branham · Accepted Answer · 2009-03-04 23:56:45Z

2

First idea that came to mind. I'm sure there's some elaborate way to select the elements in question, (meaning you would just have to do $(selector).length) but I can't think of one off the top of my head.

var doCount = false;
var numberOfChildren = 0;

$('tr').each(function(i){
    if($(this).is("#parent_2"))
        doCount = false;

    if(count)
        numberOfChildren++;

    if($(this).is("#parent_1"))
        doCount = true;
});

answered Mar 4, 2009 at 23:56

Samantha Branham

7,5112 gold badges34 silver badges46 bronze badges

2 Comments

vladr Over a year ago

-1 - Poor performance; scans all rows in the table, even if you have 1 million and are only going to end up counting two (which happen to be at the end of the table.)

Samantha Branham Over a year ago

How often are you going to have so many rows that counting them kills performance? I agree there are better solutions, but I wouldn't worry about O(n) too much in this context.

chroder · Accepted Answer · 2009-03-05 00:13:38Z

2

I think the best way is probably to count manually. It'll be faster because you can break off when you know you've done counting (useful if your table is huge).

var rowid1 = 'parent_1';
var rowid2 = 'parent_2';

var rows = $("#"+rowid1).parent().find('tr');
var count = 0;

for (var i = 0; i < rows.size(); i++) {
    var el = rows.get(i);

    // Done counting
    if (el.id == rowid2) break;

    if (el.id != rowid1) {
        ++count;
    }
}

alert("There are " + count + " rows between");

answered Mar 5, 2009 at 0:13

chroder

4,4733 gold badges30 silver badges43 bronze badges

1 Comment

vladr Over a year ago

Still bad if the table's huge and parent_1 is towards the end of the table!

Ólafur Waage · Accepted Answer · 2009-03-05 00:29:57Z

2

Some people have some nice answers here, i was already started on mine so ill just add it for extra info.

$(document).ready(function() {
    n = 0;
    var x = new Array(0,0,0);

    $("table tr").each(function(i)
    {
        if($(this).hasClass("child"))
        {
            x[n] += 1;
        }
        else
        {
            n += 1;
        }
    });

    for(var y = 0; y < x.length; y++)
    {
        alert(x[y]);
    }
});

EDIT btw mine does not care how many parents are there, it will just keep counting as long the array is big enough.

edited Mar 5, 2009 at 0:29

answered Mar 5, 2009 at 0:22

Ólafur Waage

70.3k22 gold badges147 silver badges199 bronze badges

Comments

qpingu · Accepted Answer · 2009-03-04 23:54:20Z

0

Assuming parent_1 and parent_2 are the start and the end rows respectively:

$("#parent_1").siblings().size() - 1

answered Mar 4, 2009 at 23:54

qpingu

9707 silver badges11 bronze badges

1 Comment

eyelidlessness Over a year ago

Why would it matter what order they're in?

Collectives™ on Stack Overflow

Count number of table rows between two specific rows with jQuery

6 Answers 6

3 Comments

6 Comments

2 Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

6 Comments

2 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related