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

Getting child element of a child element of a parent with ID

本文关键字：元素 ID 获取      更新时间：2023-09-26

我需要使用 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>

Non-jQuery 解决方案

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

j查询解决方案

使用: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（） 选择器

试试这个 

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

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

var TheThirdRow = $('#part1').find('table')
                             .eq(2)
                             .find('tr')
                             .eq(2);
相关文章：