Selecteur préparé dans une variable

Version imprimable

Dans un gestionnaire d'évènement
Code:

1 2 3 4 5 6 7 8 9 10 function toggle(event) { var element = event.target; var name = element.className; if ('LI' == element.tagName) { var div = "#"+element.id; var affiche = $(div).className; alert (name + " - " + affiche); } }
Je récupère sans problème l'élément à l'origine de l'évènement => var element
Pour créer un nouveau sélecteur sur les enfants de cet élément (en fait un <div> enfant unique de l'element) j'ai cherché toutes sortes de syntaxes.

J'en suis revenu au niveau même de l'element pour chercher comment utiliser un sélecteur préparé dans une variable. Sans succès. mon alert est toujours «undefined» au lieu d'être egal à <name>

16/07/2009, 12h33
Bovino

Code:

var element = $(event.target);
16/07/2009, 16h20
Softdaemon

Le probleme est dans l'utilisation d'une variable pour préparer le selecteur
Vous remerciant de l'intérêt que vous avez bien voulu prendre à ma question.

La syntaxe que j'utilisais me permet effectivement de definir l'objet <element> et d'en lire les caracteristiques <tagName>, <className> ou <id> alors que la syntaxe que vous me proposez ne permet pas de definir correctement cet objet <element> et donc d'en lire les caracteristiques.

Mon problème est ensuite que alors que element.id est connu la syntaxe :
Code:

1 2 var selecteur = "#"+element.id; var affiche = $(selecteur).className;
ne me permet pas de definir <affiche> qui devrait être egal à <name> defini plus haut sans probleme à l'aide de

Code:

var name = element.className;

Le but a terme est d'écrire quelque chose comme

Code:

affiche2 = $(selecteur > div) .classname

pour trouver ce que je cherche en realite.
Apparemment donc, c'est la definition ou la syntaxe d'utilisation de <selecteur> qui pose probleme

(Tests effectués en local à partir de PHPEdit et en vérifiant les elements ci-dessus par des <alert> adequats)
16/07/2009, 19h26
Softdaemon

Probleme sous le probleme precedent

En realite ma question initiale comportait des erreurs d'affinage.
Je pense que je ne peux pas selectionner deux fois le même element une fois au titre de l'event, l'autre par son id.
Je pense donc qu'il faut laisser tomber pour le moment cette question que je continuerai d'approfondir.

Mais du coup au fil de mes tests, je me suis trouvé avec une autre question qu'il me parait preferable de separer dans une nouvelle question <Probleme avec className>

Avec mes remerciements

Bonsoir.

Exemple de sélection d'une div enfant, contenu du event jQuery, exemple avec currentTarget :

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
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
 
<!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>
	<style type="text/css">
		body {
			background-color:#696969;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, 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;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}
	</style>
	<!-- <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> -->
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
 
		function myEvent(e){
			$(e.currentTarget).children("div").eq(1).css("backgroundColor","red");
		}
 
		$(document).ready(function(){
			//exemple n° 1
			$("#maDiv1").hover(
				function () {
					$(this).children("div").eq(0).css("color","red");
				}, 
				function () {
					$(this).children("div").eq(0).css("color","black");
				}
			);
 
			$("#maDiv2").click(function(e){
				var s = [];
 
				s.push("type = " + e.type);
				s.push("target = " + e.target);
				s.push("related target = " + e.relatedTarget);
				s.push("current target = " + e.currentTarget);
				s.push("pageX = " + e.pageX);
				s.push("pageY = " + e.pageY);
				s.push("result = " + e.result);
				s.push("data = " + e.data);
				s.push("timeStamp = " + e.timeStamp);
				s.push("is default prevented = " + e.isDefaultPrevented());
				s.push("is propagation stopped = " + e.isPropagationStopped());
 
				$("#affiche").html("<p>" + s.join("<br/>") + "</p>");
 
				myEvent(e);
			});
 
		});
	</script>
</head>
<body>
	<div id="conteneur">
 
		<div id="maDiv1">
 
			<p>Le texte de ma division 1.</p>
 
			<div>div enfant n° 1.</div>
			<div>div enfant n° 2.</div>
 
		</div>
 
		<div id="maDiv2" class="maClassDiv2">
 
			<p>Le texte de ma division 2.</p>
 
			<div>div enfant n° 1.</div>
			<div>div enfant n° 2.</div>
 
		</div>
 
		<div id="affiche"></div>
	</div>
</body>
</html>