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）混淆，甚至虽然这两者可以导致显着不同的匹配元素。随着：n-child（n），所有孩子都被计算在内，无论他们是什么是，并且只有在匹配时才选择指定的元素选择器附加到伪类。使用：eq（n）仅选择器附属于伪类计算，不限于儿童选择任何其他元素，并选择第（n + 1）个（n为0）。

<强>参考：

:nth-child() Selector

Answer 2

试试这个

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

Answer 3

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

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

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

3 个答案:

非jQuery解决方案

jQuery解决方案