Selecteur préparé dans une variable

**Softdaemon** · 16/07/2009, 12h21

Dans un gestionnaire d'évènement

Code :

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

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>

**Bovino** · 16/07/2009, 12h33

Code :

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

var element = $(event.target);

**Softdaemon** · 16/07/2009, 16h20

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 :

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

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 :

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

var name = element.className;

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

Code :

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

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)

**Softdaemon** · 16/07/2009, 19h26

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

**danielhagnoul** · 17/07/2009, 01h36

Bonsoir.

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

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
 
<!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>

Selecteur préparé dans une variable

jQuery

Discussions similaires

Partager

Partager