Children VS Find ?

**nims** · 15/09/2010, 17h49

Bonsoir à tous !

Voici ma structure HTML:

Code :

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

1
2
3
4
5
6
7
 
 
<div id="inv"><div style="margin-left:40px"><div id="1"><div style="margin-left:40px"><div id="titre"></div>
<div id="infos"></div></div></div>
<div id="2">idem</div>
<div id="3">idem</div>
...</div></div>

Les div 1,2,3... ont la même structure.

Je souhaite récupérer le contenu de la div infos de la div id=1

Ceci ne fonctionne pas, ca me retourne NULL

Code :

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

1
2
 
$('#inv').find('#1').children('#infos').html()

Ceci fonctionne:

Code :

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

1
2
 
$('#inv').find('#1').find('#infos').html()

Pourquoi ? Je ne comprend pas...
J'ai une autre structure similaire qui fonctionne pourtant. La seule différence c'est le niveau de départ (dans l'autre cas je suis déja dans le inv)

Une idée de pourquoi find fonctionne et pas children?
Peut être que je les utilise mal...

Merci d'avance pour votre aide !

**danielhagnoul** · 15/09/2010, 18h34

Bonsoir

Voir les commentaires :

Code :

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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* BASE */
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
 
		/* dvjh */
		h1 {
			text-align:center;
			font-style:italic;
			text-shadow: 4px 4px 4px #bbbbbb;
		}
		h2 {
			text-align:center;
		}
		div#conteneur {
			width:95%;
			height:auto;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
		}
		div#affiche {
			clear:both;
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
	<script>
/*
Les div 1,2,3... ont la même structure.
--
Attention un id doit être unique !
 
Attention un id doit commencer par une lettre pas un chiffre
--
Ceci ne fonctionne pas, ca me retourne NULL : $('#inv').find('#1').children('#infos').html()
 
Logique, children cherche le fils immédiat c'est le blockquote !
--
Ceci fonctionne: $('#inv').find('#1').find('#infos').html()
 
Logique, find cherche dans tous les descendants.
*/
		$(function(){
			$("#affiche").append( $('#inv').find('#div1 > blockquote').children('#infos1').html());
 
			$("#affiche").append( $('#inv').find('#infos1').html());
		});
	</script>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
 
		<div id="inv">
			<blockquote>
				<div id="div1">
					<blockquote>
						<div id="titre1">
							<p>test 1 titre</p>
						</div>
						<div id="infos1">
							<p>test 1 infos</p>
						</div>
					</blockquote>
				</div>
				<div id="div2">
					<blockquote>
						<div id="titre2">
							<p>test 2 titre</p>
						</div>
						<div id="infos2">
							<p>test 2 infos</p>
						</div>
					</blockquote>
				</div>
				<div id="div3">
					<blockquote>
						<div id="titre3">
							<p>test 3 titre</p>
						</div>
						<div id="infos3">
							<p>test 3 infos</p>
						</div>
					</blockquote>
				</div>
			</blockquote>
		</div>
 
		<div id="affiche">
		</div>
	</div>
</body>  
</html>

**nims** · 15/09/2010, 18h57

Ok donc children() correspond à :first-children en css...
Par contre, je sais que c'est dans les normes mais pourquoi un id ne doit pas commencer par un nombre ?

**danielhagnoul** · 15/09/2010, 19h17

On m'a toujours dit de commencer un id par une lettre, mais il est vrai que la norme ne dit rien à ce sujet : http://www.whatwg.org/specs/web-apps...e-id-attribute

**nims** · 15/09/2010, 19h18

mdr
Alors pourquoi l'appliquer ?

J'ai cherché mais personne semble savoir...

**danielhagnoul** · 15/09/2010, 19h26

"Certains" écrivent que, mais sur quelle base ? Je ne trouve pas l'équivalent dans une norme, mais je cherche mal sans doute.

Naming rules:

Must begin with a letter A-Z or a-z
Can be followed by: letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".")
Values are case-sensitive

**Bovino** · 15/09/2010, 20h21

Envoyé par danielhagnoul

"Certains" écrivent que, mais sur quelle base ? Je ne trouve pas l'équivalent dans une norme, mais je cherche mal sans doute.

Oui

http://www.w3.org/TR/REC-html40/types.html#type-name

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

**Bovino** · 15/09/2010, 20h34

Envoyé par nims

Ok donc children() correspond à :first-children en css...

Euh... non, car :first-children n'existe pas en CSS

D'ailleurs, ce serait un contresens : children signifie les enfants, c'est donc incompatible avec la notion de first (premier donc unique).

Toujours est-il que la structure du DOM (dont découlent les pseudo-éléments CSS et les propriétés et méthodes JavaScript) distingue la notion d'enfant de celle de descendant. Une simple analogie avec une structure familiale permet de comprendre les différences

**nims** · 15/09/2010, 20h56

Euh... non, car :first-children n'existe pas en CSS

http://www.w3schools.com/css/pr_pseudo_first-child.asp

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Ca n'explique pas pourquoi c'est comme ça !!
J'aime bien savoir pourquoi faut appliquer des règles !
C'est une obligation ou c'est une convention ?...

**Bovino** · 15/09/2010, 21h36

Envoyé par nims

http://www.w3schools.com/css/pr_pseudo_first-child.asp

Oui, ton lien est intéressant, mais quel rapport avec :first-children ?

:first-child et :first-children c'est pas tout-à-fait pareil

Envoyé par nims

Ca n'explique pas pourquoi c'est comme ça !!
J'aime bien savoir pourquoi faut appliquer des règles !
C'est une obligation ou c'est une convention ?...

J'aurais tendance à dire que c'est une convention, mais qui a probablement une origine... mais là, j'avoue que je n'en sais pas plus

**danielhagnoul** · 16/09/2010, 11h41

Envoyé par danielhagnoul

Bonsoir

Voir les commentaires :

Code :

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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* BASE */
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
 
		/* dvjh */
		h1 {
			text-align:center;
			font-style:italic;
			text-shadow: 4px 4px 4px #bbbbbb;
		}
		h2 {
			text-align:center;
		}
		div#conteneur {
			width:95%;
			height:auto;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
		}
		div#affiche {
			clear:both;
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
	<script>
/*
Les div 1,2,3... ont la même structure.
--
Attention un id doit être unique !
 
Attention un id doit commencer par une lettre pas un chiffre
--
Ceci ne fonctionne pas, ca me retourne NULL : $('#inv').find('#1').children('#infos').html()
 
Logique, children cherche le fils immédiat c'est le blockquote !
--
Ceci fonctionne: $('#inv').find('#1').find('#infos').html()
 
Logique, find cherche dans tous les descendants.
*/
		$(function(){
			$("#affiche").append( $('#inv').find('#div1 > blockquote').children('#infos1').html());
 
			$("#affiche").append( $('#inv').find('#infos1').html());
		});
	</script>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
 
		<div id="inv">
			<blockquote>
				<div id="div1">
					<blockquote>
						<div id="titre1">
							<p>test 1 titre</p>
						</div>
						<div id="infos1">
							<p>test 1 infos</p>
						</div>
					</blockquote>
				</div>
				<div id="div2">
					<blockquote>
						<div id="titre2">
							<p>test 2 titre</p>
						</div>
						<div id="infos2">
							<p>test 2 infos</p>
						</div>
					</blockquote>
				</div>
				<div id="div3">
					<blockquote>
						<div id="titre3">
							<p>test 3 titre</p>
						</div>
						<div id="infos3">
							<p>test 3 infos</p>
						</div>
					</blockquote>
				</div>
			</blockquote>
		</div>
 
		<div id="affiche">
		</div>
	</div>
</body>  
</html>