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

Question

我需要使用JavaScript将id =“ part1”的元素的子元素作为子元素。 所以从本质上讲，我想到达span元素的第三张表的第三行，但是我似乎无法使其起作用:(

<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选择器的工作方式不同。 在这种情况下，它会做同样的事情，因为您在span#part1内只有table元素。

从jQuery文档中：

：nth-​​child（n）伪类很容易与：eq（n）混淆，即使这两个类可能导致匹配元素截然不同。 使用：nth-​​child（n），将计算所有子项，无论它们是什么，并且仅当指定元素与附加到伪类的选择器匹配时才选择指定元素。 使用：eq（n）时，仅对连接到伪类的选择器进行计数，而不仅限于其他元素的子级，并且选择第（n + 1）个选择器（n从0开始）。

参考：

：nth-​​child（）选择器

Answer 2

尝试这个

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

Answer 3

我更喜欢使用.find()而不是嘶嘶声引擎。 像这样：

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