2 questions de grand débutant

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:

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

Bonjour.

Pour le texte seul :

Code:

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

Pour le html (texte + balises éventuelles) :

Code:

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

Merci

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 :lol: )

Citation:

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 :lol: )

Code:

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

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

Code:

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>

sinon on peut faire ca :

Code:

$('div:eq(0)').attr('id')

ou

Code:

$('#toto').attr('id')

id étant un attribut on peut facilement y accéder avec $().attr()

Merci

Je faisais une confusion en pensant que l'objet ramené par jQuery "fabriquait" des membres qui représentaient , entre autres, les attributs. :oops:
C'est très clair maintenant.

Je marque le post comme résolu.

Merci beaucoup :ccool: :ccool: