获取父元素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>

- Alpotato

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() Selector

- letiagoalves

---

谢谢 - 你能简单解释一下eq的用法吗？这样我就能更好地理解你的答案了 :) - Alpotato

谢谢 :) 我刚刚遇到了一个问题，我的JQUERY库没有链接到我的网站 - 所以我会开始解决这个问题。 - Alpotato

我刚看到了你的评论 :) 非常感谢！如果我想要进一步深入子节点，我应该说“row.childNodes[#]”吗？ - Alpotato

非JQuery一行代码：var row = document.querySelector('#part1 > table:nth-child(3) > tr:nth-child(3)') - Gideon Mulder

Answer 2

尝试这个

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

- Praind

Answer 3

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

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

- frenchie

---

你有偏好的原因吗？我发现find()更高效。 - nu everest

@nueverest：是的，每当您有一个表达式$(SomeSelector)时，它需要首先使用Sizzle引擎进行评估，以便jQuery知道要处理哪个元素。如果您从选择器$('#SomeID')开始具有ID的元素，则跳过所有初始计算，性能测试显示出来。 - frenchie