[DOM] jquery et DOM

**swannus** · 08/09/2008, 16h26

Bonjour à tous j'ai besoin d'un petit coup de main pour cette page
Je cherche à afficher la fenêtre hello world quand je click sur chaque "<li>".
j'ai un script jquery qui fonctionne avec tous les éléments ,mais je voudrai que ce soit spécifique aux "li"
Voila voila toute aide est la bienvenue.
Merci.

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
 
 
<div id="suggestions" class="suggestionsBox" style="">
 
	<div id="autoSuggestionsList" class="suggestionList">
 
 
		<div id="choix_au">
 
 
 
		<li id="z2"><div>TI0434VOJQT A5ET1O5DXAZ</div></li>
 
		</div>
	</div>
</div>
 
 
 
<script type="text/javascript">
 
   $(document).ready(function () {
 
   $("suggestionList ").click(function () {
     alert("Hello world");
   });
 });    
 
 
</script>

**Sh4dow49** · 08/09/2008, 16h39

Ce n'est pas possible sans jQuery ? Si tu mets l'attribut onclick sur chaque balise <li> et ton alert dans le onclick ça marche pas ?

EDIT : A nan ca marche pas lol (je viens d'essayer)
Par contre tu peux faire le test sur le tag de ta balise avant d'afficher l'alert (ça c'est surement possible)

**swannus** · 08/09/2008, 16h51

En fait je veux séparer le html du JavaScript(Jquery).
La est le problème.
Il ne faut pas qu'il y ai de js directement dans le html.

**Sh4dow49** · 08/09/2008, 17h00

hé bien tu exporte ton script js dans un fichier à part et tu insère ensuite le fichier js dans l'en-tete de ta page comme tu fais pour le fichier jquery.js non ?

**swannus** · 08/09/2008, 17h10

Je me suis mal exprimé.
Il ne faut pas de html dans ce genre"

Code :

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

1
2
 
<a href="javascript:toto()">

"
mais plutot

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
 
   $(document).ready(function () {
 
   $("a").click(function () {
     alert("Hello world");
   });
 });    
 
 
</script>
 
<a href="monlien">monlien</a>

le javascript ne doit pas être mélangé au html mais peux être dans la même page.

mon soucis c'est que je n'arrive pas a specifier que je veux une action sur les "li".

désolé pour le manque de clarté.

Invité · 08/09/2008, 17h11

Bonjour,

essaie avec

Code :

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

1
2
3
4
5
6
7
8
 
<script type="text/javascript">
$(document).ready(function () {
   $("li").click(function () {
     alert("Hello world");
   });
 });
</script>

A+

**foudev** · 08/09/2008, 17h23

vu que tu as attribué un id à ton "li".
tu peux mettre ça

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
 
 $(document).ready(function () {
 
   $("#z2").click(function() {
     alert("Hello world");
   });
 });     
 
</script>
</head>
 
<body>
<div id="suggestions" class="suggestionsBox" style="">
 
	<div id="autoSuggestionsList" class="suggestionList">
 
 
		<div id="choix_au">
 
 		<ul>
 
		<li id="z2"><div>TI0434VOJQT A5ET1O5DXAZ</div></li>
		</ul> 
		</div>
	</div>
</div>
 
</body>
</html>

**swannus** · 09/09/2008, 10h23

Un petit ajout si on recherche tous les "li" avec un "id qui commence par "z"

"li[@id^='z']" ou si ça ne marche pas "li[@id^='z_']" sans doute du à la version de jquery.

Code :

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

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
 
$(document).ready(function () {
   $("li[@id^='z']").click(function() {
     alert("Hello world");
   });
 });     
 
</script>

[DOM] jquery et DOM

jQuery

Vue hybride

Discussions similaires

Partager

Partager