selecteur $(elt) et className

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

En testant un probleme de selection je me suis heurté a un probleme avec l'utilisation de className

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
<html>
<head>
	<title>Test commutation</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<meta name="generator" content="PHPedit 3.4">
	<style type="text/css">
		.hidden { display:none; }
		.visible { display:block; }
	</style>
 
	<script type="text/javascript" src="../Commons/Library/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
	$(document).ready(function() {
 	   $('#explorer').bind('click', null, toggle);
	});
 
	function toggle(event) {
            var element = event.target;
	    var name = element.tagName;
		alert(element.id);
	//		var display = $('#enfant').css("display");
			var display = $('#enfant').className;
			alert(display);
	    if ('LI' == name) {
	// 		$('#enfant').css("display", "block");
			$('#enfant').className = "visible";
	     }
	}
	</script>
</head>
 
<body>
	<div id="explorer">
		<ul>
			<li id='parent'>
				id = parent
			</li>
			<div id='enfant' class='hidden'>
				<li>id = element enfant</li>
			</div>;
		</ul>;
	</div>
</body>
</html>

Tel que ce petit test est ecrit il me semblait que les deux syntaxes pour rendre visible l'élement enfant (en cliquant sur le point de liste) devait e^tre équivalentes (une communication vues quelque part indiquant même pour la plupart des navigateurs une execution plus rapide avec classname).
En fait mes syntaxes avec className ne marchent pas !

Sauriez-vous pourquoi ?
Probleme de syntaxe ????

**SpaceFrog** · 16/07/2009, 19h51

déja ta structure est mal balancée
le div qui entroure un li dans un ul ...

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

Bonsoir.

Exemple avec toggle() (équivalent show/hide) :

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
 
<!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;
		}
 
		/* TEST */
 
		#enfant {
			display:none;
		}
	</style>
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
	<script type="text/javascript">		
		$(document).ready(function(){
			$("#parent").click(function(){
				$("#enfant").toggle();
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
 
		<ul>
			<li id="parent">
				element parent
				<ul id="enfant">
					<li>element enfant</li>
				</ul>
			</li>
		</ul>
 
	</div>
</body>
</html>

**Softdaemon** · 17/07/2009, 09h44

J'ai bien pris note de vos réponses et je vous en remercie. Vos suggestions mes seront très utiles.
En fait je suis parti d'un code qui est ecrit avec <Prototype>. Je voulais le retranscrire avec le moins de fatigue possible (à mon âge, on s'économise !) mais avec jQuery.
Mais ce qui me semblait devoir m'occuper quelques minutes s'est enlisé sans que j'arrive à comprendre exactement où !
Ma structure de test ne prétend pas être un modele du genremais c'est le déshabillage progressif jusqu'à l'extrême de la structure de départ arrêtée au moment où j'ai pu mettre en évidence une question simple

La question élémentaire (i.e. simplifiée autant que possible) est donc simplement de savoir si ma syntaxe avec className est incorrecte dans ce contexte.

selecteur $(elt) et className

jQuery

Discussions similaires

Partager

Partager