获取具有ID的父元素的子元素的子元素

Question

我需要使用带有javascript的id为"part1"的元素的子元素的子元素.所以基本上,我想要到span元素的第3个表的第3行,但我似乎无法让它工作:(

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

Answer 1

非jQuery解决方案

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

jQuery解决方案

使用:eq选择器:

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

使用:nth-child选择器:

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

:eq和:nth-child选择器选择所有父元素的第n个子元素.然而,:eq遵循"0索引"计数并nth-child遵循"1索引".

要知道,:eq和nth:child选择工作方式不同.在这种情况下,它会做同样的事情,因为你只有table里面的元素span#part1.

从jQuery文档:

:nth-​​child(n)伪类很容易与:eq(n)混淆,即使这两者可能导致显着不同的匹配元素.使用:nth-​​child(n),所有子节点都被计数,无论它们是什么,只有在与附加到伪类的选择器匹配时才选择指定的元素.使用:eq(n)仅计算附加到伪类的选择器,不限于任何其他元素的子节点,并且选择第(n + 1)个(n为0).

参考:

:nth-​​child()选择器