7

我需要使用 javascript 找到具有 id = "part1" 的元素的子元素的子元素。所以本质上，我想到达 span 元素的第三个表的第三行，但我似乎无法让它工作:(

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

3 回答 3

19

非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-indexed”计数并nth-child遵循“1-indexed”。

请注意，:eq选择nth:child器的工作方式不同。在这种情况下，它会做同样的事情，因为你只有table里面的元素span#part1。

来自 jQuery 文档：

:nth-child(n) 伪类很容易与 :eq(n) 混淆，尽管两者会导致匹配的元素截然不同。使用 :nth-child(n)，所有子元素都被计算在内，无论它们是什么，并且仅当指定的元素与附加到伪类的选择器匹配时才会被选中。使用 :eq(n) 仅计算附加到伪类的选择器，不限于任何其他元素的子元素，并且选择第 (n+1) 个（n 从 0 开始）。

参考：

:nth-child() 选择器

于 2013-09-19T09:03:34.993 回答
2

尝试这个 

this.parentNode().getElementsByTagName("table")[2].childNodes[2];
于 2013-09-19T09:05:41.733 回答
0

我更喜欢使用.find()而不是嘶嘶作响的引擎。像这样的东西：

var TheThirdRow = $('#part1').find('table')
                             .eq(2)
                             .find('tr')
                             .eq(2);
于 2013-09-19T09:10:53.423 回答