2 questions de grand débutant

**lamaison** · 10/11/2009, 10h44

Bonjour,
2 heures que je me casse la tête sur un truc qui doit être très simple

1)
je ne comprends pas pourquoi je ne peux pas accéder à un div avec la notation # ; voici le code :

Code :

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

1
2
3
4
5
<div id="toto">je suis le texte du div toto</div>
<script type="text/javascript">
	alert(jQuery('#toto').id); // KO
	alert(jQuery('div')[0].id);	// OK
</script>

2)
Comment via une alert faire afficher le contenu du div ?

Merci

**danielhagnoul** · 10/11/2009, 11h21

Bonjour.

Pour le texte seul :

Code :

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

alert($("#toto").text());

Pour le html (texte + balises éventuelles) :

Code :

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

alert($("#toto").html());

**lamaison** · 10/11/2009, 12h11

Merci pour cette réponse claire.

Je ne comprends cependant toujours pas pourquoi
$('#toto').id ne fonctionne pas alors que
$('div')[0].id fonctionne ...

( et merci à Bovino pour la mise en forme du code

)

**danielhagnoul** · 10/11/2009, 23h42

Envoyé par lamaison

Merci pour cette réponse claire.

Je ne comprends cependant toujours pas pourquoi
$('#toto').id ne fonctionne pas alors que
$('div')[0].id fonctionne ...

( et merci à Bovino pour la mise en forme du code

)

Code :

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

$("#toto")[0].id;

Pour apprendre, je vous conseille de regarder cet exemple avec Firefox et Firebug :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
 
			$("#divDeuxID").click(function(){
				console.log("this = " + this);
				console.log("this.id = " + this.id);
				console.log("$(this) = " + $(this));
				console.log("$(this)[0] = " + $(this)[0]);
 
				console.log("$(this).prev() = " + $(this).prev());
				console.log("$(this).prev()[0] = " + $(this).prev()[0]);
				console.log("$(this).prev()[0].id = " + $(this).prev()[0].id);
 
				console.log("$(this).next() = " + $(this).next());
				console.log("$(this).next()[0] = " + $(this).next()[0]);
				console.log("$(this).next()[0].id = " + $(this).next()[0].id);
			});
 
			$("#divUnID").click(function(){
				console.log("this = " + this);
				console.log("this.id = " + this.id);
				console.log("$(this) = " + $(this));
				console.log("$(this)[0] = " + $(this)[0]);
 
				console.log("$(this).children() = " + $(this).children());
				console.log("$(this).children().length = " + $(this).children().length);
				console.log("$(this).children()[0] = " + $(this).children()[0]);
				console.log("$(this).children()[0].id = " + $(this).children()[0].id);
			});
		});
	</script>
</head>
<body>
	<ol>
		<li>Cliquez sur la divsion 2 : bord rouge !</li>
		<li>Examinez les résultats puis cliquez sur le bouton "Effacer" de la console</li>
		<li>Cliquez sur la divsion 1 : bord bleu !</li>
	</ol>
	<div id="divUnID" style="border:2px solid blue; margin:12px; padding:6px;">
		<p id="div1p1">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt pulvinar elit. Maecenas nec risus vitae felis suscipit scelerisque. Suspendisse placerat lorem ut nisl. Sed sit amet quam sit amet elit tempus eleifend. Aliquam posuere egestas elit.
		</p>
		<p id="div1p2">
			Aliquam erat volutpat. Phasellus cursus tempor augue. Morbi eu nisi et mi interdum lobortis. Nullam faucibus, enim quis ultricies imperdiet, ante leo lacinia nisi, vitae malesuada enim orci id dolor. Maecenas volutpat porta turpis.
		</p>
	</div>
	<div id="divDeuxID" style="border:2px solid red; margin:12px; padding:6px;">
		<p id="div2p1">
			Vestibulum ac nisl sit amet odio lobortis pellentesque. Quisque eu nisl. In ipsum metus, congue in, porta non, luctus ac, dolor. Ut suscipit, metus id blandit scelerisque, dolor nunc varius velit, sit amet feugiat magna neque ut lorem. Ut ut lacus.
		</p>
	</div>
	<div id="divTroisID" style="border:2px solid green; margin:12px; padding:6px;">
		<p id="div3p1">
			Aliquam erat volutpat. Phasellus cursus tempor augue. Morbi eu nisi et mi interdum lobortis. Nullam faucibus, enim quis ultricies imperdiet, ante leo lacinia nisi, vitae malesuada enim orci id dolor. Maecenas volutpat porta turpis.
		</p>
		<p id="div3p2">
			Vestibulum ac nisl sit amet odio lobortis pellentesque. Quisque eu nisl. In ipsum metus, congue in, porta non, luctus ac, dolor. Ut suscipit, metus id blandit scelerisque, dolor nunc varius velit, sit amet feugiat magna neque ut lorem. Ut ut lacus.
		</p>
	</div>
</body>
</html>