web-dev-qa-db-fra.com

Obtention de l'élément enfant d'un élément enfant d'un parent avec ID

J'ai besoin d'aller à l'enfant de l'enfant de l'enfant d'un élément avec un id = "part1" avec javascript. Donc, essentiellement, je veux aller à la 3ème rangée de la 3ème table de l'élément span mais je n'arrive pas à le faire fonctionner :(

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

Solution non jQuery

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

solution jQuery

Utilisation du sélecteur :eq:

var $row = $('#part1 > table:eq(2) > tr:eq(2)');

Utilisation du sélecteur :nth-child:

var $row = $('#part1 > table:nth-child(3) > tr:nth-child(3)');

Les sélecteurs :eq et :nth-child sélectionnent tous les éléments qui sont le nième enfant de leur parent. Cependant, :eq suit le décompte "indexé 0" et nth-child suit le "indexé 1".

Sachez que les sélecteurs :eq et nth:child fonctionnent différemment. Dans ce cas, il en irait de même, car vous ne disposez que de table éléments dans span#part1.

D'après la documentation jQuery:

La pseudo-classe: nth-child (n) est facilement confondue avec: eq (n), même Bien que les deux puissent donner lieu à des éléments correspondants extrêmement différents. Avec: nth-child (n ), tous les enfants sont comptés, quel que soit leur et l'élément spécifié n'est sélectionné que s'il correspond au sélecteur associé à la pseudo-classe. Avec: eq (n), seul le sélecteur Attaché à la pseudo-classe est compté, non limité aux enfants de Tout autre élément, et le (n + 1) ème (n est 0 -based) est sélectionné.

Référence:

: nth-child () Selector

18
letiagoalves

essaye ça 

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

Je préfère utiliser .find() que le moteur Sizzle. Quelque chose comme ça:

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