web-dev-qa-db-ja.com

IDを持つ親の子要素の子要素を取得する

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>
javascriptchildren
7
Alpotato

非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）と簡単に混同されますが、2つの結果として、一致する要素が劇的に異なる場合があります。 ：nth-​​child（n）を使用すると、子が何であるかに関係なく、すべての子がカウントされ、指定された要素は、疑似クラスに接続されたセレクターと一致する場合にのみ選択されます。 ：eq（n）を使用すると、他の要素の子に限定されずに、疑似クラスにアタッチされたセレクターのみがカウントされ、n + 1番目（nは0ベース）が選択されます。

参考：

：nth-​​child（）セレクター

19
letiagoalves

これを試して

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

シズルエンジンではなく.find()を使用することを好みます。このようなもの：

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