Getting child element of a child element of a parent with ID

Question

I need to get to the child of the child of the child of an element with an id = "part1" with javascript. So essentially, I want to get to the 3rd row of the 3rd table of the span element but I can't seem to get it to work :(

<span id = "part1">
<table> </table>
<table> </table>
<table>
    <tr> ... </tr> 
    <tr> ... </tr> 
    <tr> ... </tr> (get this row)
</table>
</span>

letiagoalves · Accepted Answer · 2013-09-19T09:15:38.383

19

Non-jQuery solution

var span = document.getElementById('part1');
var row = span.getElementsByTagName('table')[2].childNodes[2];

jQuery solution

Using :eq selector:

var $row = $('#part1 > table:eq(2) > tr:eq(2)');

Using :nth-child selector:

var $row = $('#part1 > table:nth-child(3) > tr:nth-child(3)');

:eq and :nth-child selectors selects all elements that are the nth-child of their parent. However :eq follows "0-indexed" counting and nth-child follows "1-indexed".

Be aware that :eq and nth:child selectors work differently. In this case it would do the same because you only have table elements inside span#part1.

From jQuery documentation:

The :nth-child(n) pseudo-class is easily confused with :eq(n), even though the two can result in dramatically different matched elements. With :nth-child(n), all children are counted, regardless of what they are, and the specified element is selected only if it matches the selector attached to the pseudo-class. With :eq(n) only the selector attached to the pseudo-class is counted, not limited to children of any other element, and the (n+1)th one (n is 0-based) is selected.

Reference:

:nth-child() Selector

edited Sep 19 '13 at 09:15

answered Sep 19 '13 at 09:03

letiagoalves

11,224
4
40
66

Thank you - could you just quickly explain the use of eq - just to put your answer into context for me :) – Alpotato Sep 19 '13 at 09:04
Thank you :) I've just run into an error with my JQUERY library not linking to my site - so I'll get cracking on that – Alpotato Sep 19 '13 at 09:21
I just saw your comment :) many thanks! If I end up wanting to go another level deeper in terms of the child node would i say "row.childNodes[#]" ? – Alpotato Sep 19 '13 at 09:25
Non-Jquery one liner: var row = document.querySelector('#part1 > table:nth-child(3) > tr:nth-child(3)') – Gideon Mulder Mar 24 '17 at 13:55

score 2 · Answer 2 · answered Sep 19 '13 at 09:05

2

try this

this.parentNode().getElementsByTagName("table")[2].childNodes[2];

answered Sep 19 '13 at 09:05

Praind

1,551
1
12
25

score 0 · Answer 3 · answered Sep 19 '13 at 09:10

0

I prefer using .find() rather than the sizzle engine. Something like this:

var TheThirdRow = $('#part1').find('table')
                             .eq(2)
                             .find('tr')
                             .eq(2);

answered Sep 19 '13 at 09:10

frenchie

51,731
109
304
510

is there a reason for your preference? I find() more efficient? – nu everest May 01 '18 at 18:29
@nueverest: yes, anytime you have an expression $(SomeSelector) it needs to be evaluated with the Sizzle engine first so that jQuery knows which element to work with. If you start with an element with an ID in the selector $('#SomeID'), it skips all the initial computation and perf tests show that. – frenchie May 04 '18 at 09:15

Getting child element of a child element of a parent with ID

3 Answers3

Non-jQuery solution

jQuery solution