Cibler le 3ème enfant d'un parent

**moimp** · 30/09/2017, 15h14

Bonjour à tous,

En vue de cibler le 3ème enfant d'un parent, je fais ceci:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

console.log(contentCell.firstChild.nextSibling.nextSibling);

Outre le fait que cette méthode me parait lourde, je pense qu'elle peut provoquer des erreurs, si un élément est manquant. Auriez-vous une meilleure solution?

**Beginner.** · 30/09/2017, 19h44

Salut,

Je ne crois pas que nextSibling fonctionne dans ce cas (cela donnerait plutôt le "frère suivant" je pense)...

J'utiliserais children ou childNodes (ce dernier prend en compte les nodetext élément de type 0) : elem.children[i], le premier élément enfant ayant pour indice 0 (i=0)...

**danielhagnoul** · 30/09/2017, 23h45

Sans les codes (CSS, HTML, JS) d'un exemple précis, difficile de voir de quoi il s'agit ! Vos questions manquent toujours de précisions. Ce qui vous donne des réponses justes, mais approximatives par rapport à votre problème, ce qui ne vous satisfait jamais totalement. Comme d'habitude, je ferai confiance à la versatilité de querySelector().

Comme déjà écrit par ailleurs (dans une Q/R jQuery si ma mémoire est bonne), pour faire du JS, il faut absolument connaître le CSS, sinon vous n'arriverez jamais à construire des sélecteurs efficaces.

Exemple avec des paragraphes dans une division et des cellules dans une table :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <style>
                *,
                *:after,
                *:before {
                        box-sizing: border-box;
                }
                
                /* CSS du test */
                
                
                /* Fin CSS du test */
 
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/fr.js"></script>
  <script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.4.0.js"></script>
  <script>
    'use strict';
                
    document.addEventListener( "DOMContentLoaded", ev => {
                        // le DOM est construit, la page web n'est pas visible
                        moment.locale( "fr" );
                        klog( `DOM ready   : ${ new kDvjhDate() }` );
                        
      // code du test
                        
 
                        // fin code du test
      
    }, false );
    
    window.addEventListener( "load", ev => { 
                        // le DOM est construit et la page web est visible
                        klog( `Window load : ${ new kDvjhDate() }` );
                        
      // code du test
                        
                        klog( k$( "#myDiv > p:nth-child( 3 )" ).textContent ); // Trois
                        
                        klog( k$( "#myTable > tbody > tr:nth-child( 2 ) > td:nth-child( 3 )" ).textContent ); // 23
                        
                        // fin code du test
 
      kIDUnique();
    }, false );
  </script>
</head>
<body>
	<main>
 
		<div id="myDiv">
			<p>Un</p>
			<p>Deux</p>
			<p>Trois</p>
			<p>Quatre</p>
			<p>Cinq</p>
		</div>
 
		<table id="myTable">
			<thead>
				<tr>
					<th>T1</th>
					<th>T2</th>
					<th>T3</th>
					<th>T4</th>
					<th>T5</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
				</tr>
				<tr>
					<td>21</td>
					<td>22</td>
					<td>23</td>
					<td>24</td>
					<td>25</td>
				</tr>
				<tr>
					<td>31</td>
					<td>32</td>
					<td>33</td>
					<td>34</td>
					<td>35</td>
				</tr>
				<tr>
					<td>41</td>
					<td>42</td>
					<td>43</td>
					<td>44</td>
					<td>45</td>
				</tr>
			</tbody>
		</table>
 
	</main>
</body>
</html>

**NoSmoking** · 01/10/2017, 09h59

Bonjour,
comme le dit danielhagnoul le sélecteur :nth-child(3) est une très bonne solution, mais je tiens à signaler toutefois que dans certains cas il existe des « collections » qui permettent d'accéder en direct aux enfants et ce notamment pour les <table>.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var oTable = document.querySelector('TABLE');
// get la 3éme ligne
var oRow = oTable.rows[2];
// get la 2éme cellule de la 3éme ligne
oCell = oRow.cells[1];

**danielhagnoul** · 01/10/2017, 10h43

Oui !

En JS, il y a souvent plusieurs manières d'obtenir un résultat. La méthode choisie dépendant du contexte (codes) et du besoin précis.

C'était l'une des raisons qui m'ont fait écrire un préambule sur l'imprécision de la question dans mon premier message.

**ABCIWEB** · 01/10/2017, 18h58

Envoyé par moimp

...
Outre le fait que cette méthode me parait lourde, je pense qu'elle peut provoquer des erreurs, si un élément est manquant. Auriez-vous une meilleure solution?

Sur le principe, soit le DOM est prévisible avec toujours la même structure et tu peux cibler tes éléments en fonction du nième enfant ou parent, par contre si le DOM peut varier et qu'il peut manquer des éléments tu peux personnaliser la cible avec un identifiant, une classe, un attribut ou avec un tag spécifique...

Si tu veux cibler le 3ème enfant d'un parent cela suppose à priori que tu es dans le premier cas, donc ta question est ambigüe.

Cibler le 3ème enfant d'un parent

JavaScript

Vue hybride

Discussions similaires

Partager

Partager