Optimisation d'un selector jQuery [Résolu]

dtcSearch · 25/08/2011, 15h30

Bonjour,

je souhaiterai savoir si il était possible d'optimiser ça:

Code :

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

$(this).parents('header').children('h3').children('a').eq(1).html()

J'imaginais que ça:

Code :

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

$(this).parents('header>h3>a').eq(1).html()

aurai pu marcher mais non

je dois mal m'y prendre

SpaceFrog · 25/08/2011, 17h17

Voici ce que j'ai pu faire avec un div ...
à la place du header
A priori il ne reconnait pas la balise header ?

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
<!DOCTYPE html/>
<html>
<head>
<title>Nouvelle page 1</title>
<script type='text/javascript' src='Scripts/jquery_1.6.2.js'></script>
<script type='text/javascript'>
$(function(){
	$('#test').mouseenter(function() {
		     alert( $(this).parents('.header:first h3 a:first').html() )
	     })
})
	</script>
</head>
 
<body>
 
<div class="header" id="me">
<h3>
	<a id="one">un</a>
	<a id="two">deux</a>
	<a id="three">trois</a>
</h3>
 
<a id="test" href="foo">ici</a>	
 
</div>
</body>
 
</html>

dtcSearch · 25/08/2011, 19h21

je suis en HTML5
j'utilise la balise header

par contre j'ai fais des testes en me basant sur ce que vous me fournissez

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
<!doctype html>
<head>
	<meta charset="utf-8">
	<title>essai</title>
	<meta name="description" content="">
	<meta name="author" content="">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type='text/javascript'>
	$(function(){
		$('#test0').mouseenter(function() {
				 alert( $(this).parents('header:first').html() );
				 alert( $(this).parents('header:first h3').html() );
				 alert( $(this).parents('header:first h3 a:first').html() );
			 })
		$('#test1').mouseenter(function() {
				 alert( $(this).parents('header:first').html() );
				 alert( $(this).parents('header:first h3').html() );
				 alert( $(this).parents('header:first h3 a:first').html() );
			 })
	})
		</script>
	</head>
<body>
	<div id="header">
		<header>
			<h1>essai</h1>
		</header>
	</div>
	<div id="main">
		<aside>
			<h2>List</h2>
		</aside>
		<article>
			<header class="issue">
				<h2 class="issue-type">
					subtitle0
				</h2>
				<h3 id="i0"><a href="#i0">#0</a> <a href="#">title0</a></h3>
				<ul>
					<li><a href="#">act1</a></li>
					<li><a href="#">act2</a></li>
					<li><a href="#" id="test0">act3</a></li>
				</ul>
			</header>
			<p>desc0</p>
		</article>
		<hr />
		<article>
			<header class="issue">
				<h2 class="issue-type">
					subtitle1
				</h2>
				<h3 id="i1"><a href="#i1">#1</a> <a href="#">title1</a></h3>
				<ul>
					<li><a href="#">act1</a></li>
					<li><a href="#">act2</a></li>
					<li><a href="#" id="test1">act3</a></li>
				</ul>
			</header>
			<p>desc1</p>
		</article>
	</div>
</body>

et ça fonctionne pas

en tout cas chez moi, le code que vous fournissez fonctionne parfaitement, mais malheureusement, j'aimerai bien qu'il fonction aussi sur mon type de page

auriez vous une idée?

Visiblement ce qui pose problème vient de ça:

Code :

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

1
2
3
4
5
6
 
	<div id="header">
		<header>
			<h1>essai</h1>
		</header>
	</div>

lorsqu'on le retire, ça fonctionne parfaitement... vous auriez une solution?

par hasard? le this ici, il représente quoi? l'élément ou le document?

j'ai la réponse, c'est bien l'élément, donc il y aurai un problème de parenté
http://api.jquery.com/child-selector/ ?

SpaceFrog · 25/08/2011, 19h44

c'est justement ce que disais, jquery n'a pas l'air de reconnaitre la balise header

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<script type='text/javascript'>
$(function(){
	$('header').click(function() {
	alert( $(this).tagName);
	     })
})
	</script>
</head>
 
<body>
<header>coucou</header>

enfin à moitié

Code :

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

1
2
3
4
5
6
7
8
<script type='text/javascript'>
$(function(){
	$('HEADER').click(function() {
	alert( $(this).tagName);
	     })
	    alert($('body').children(':first')[0].tagName )
})
	</script>

il alerte bien HEADER

Bovino · 25/08/2011, 20h10

Spaffy,

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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
	div{
		width: 500px;
		height: 200px;
		background-color: silver;
	}
</style>
<script>
$(function(){
	$('header').click(function(){
		alert(this.tagName);
	});
});
</script> 
</head>
<body>
<header>
	<div></div>
</header>
</body>
</html>

fonctionne correctement, le truc, c'est que quand tu fais alert($(this).tagName), $(this) est un objet jQuery, donc pas de propriété tagName, ou laors avec alert($(this)[0].tagName)

dtcSearch · 25/08/2011, 22h17

le truc c'est que ç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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!doctype html>
<head>
	<meta charset="utf-8">
	<title>essai</title>
	<meta name="description" content="">
	<meta name="author" content="">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type='text/javascript'>
	$(function(){
		$('#test0').mouseenter(function() {
				 alert( $(this).parents('header').children('h3').children('a').eq(1).html() )
			 })
		$('#test1').mouseenter(function() {
				 alert( $(this).parents('header').children('h3').children('a').eq(1).html() )
			 })
	})
		</script>
	</head>
<body>
	<div id="header">
		<header>
			<h1>essai</h1>
		</header>
	</div>
	<div id="main">
		<aside>
			<h2>List</h2>
		</aside>
		<article>
			<header class="issue">
				<h2 class="issue-type">
					subtitle0
				</h2>
				<h3 id="i0"><a href="#i0">#0</a> <a href="#">title0</a></h3>
				<ul>
					<li><a href="#">act1</a></li>
					<li><a href="#">act2</a></li>
					<li><a href="#" id="test0">act3</a></li>
				</ul>
			</header>
			<p>desc0</p>
		</article>
		<hr />
		<article>
			<header class="issue">
				<h2 class="issue-type">
					subtitle1
				</h2>
				<h3 id="i1"><a href="#i1">#1</a> <a href="#">title1</a></h3>
				<ul>
					<li><a href="#">act1</a></li>
					<li><a href="#">act2</a></li>
					<li><a href="#" id="test1">act3</a></li>
				</ul>
			</header>
			<p>desc1</p>
		</article>
	</div>
</body>

ça fonctionne à merveille, j'aimerai juste raccourcir la ligne, si possible

je ne connais pas assez les selecteurs pour y parvenir (dans ce que je croyais fonctionner au dessus ça ne fonctionne pas je ne comprends pas pourquoi)

Bovino · 26/08/2011, 07h54

Tu ne peux pas dans un même sélecteur à la fois remonter l'arbre DOM puis le redescendre, tu seras donc obligé de le faire en deux étapes :

Code :

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

$(this).parent('header').find('h3 a:eq(1)').html()

SpaceFrog · 26/08/2011, 10h38

Je me disais aussi qu'il devait y avoir un loup dans cette affaire !
Pas sous IE Bovino ...
La balise header n'est pas reconnue

Pas IE8 en tout cas

Sous ffx ou chrome pas de soucis

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
<!DOCTYPE HTML>
<html>
<head>
<title>Nouvelle page 1</title>
<script type='text/javascript' src='Scripts/jquery_1.6.2.js'></script>
<script type='text/javascript'>
$(function(){
	$('header').click(function() {
	alert('coucou');
	    })
})
	</script>
</head>
 
<body>
<header>
<h3>
	<a id="one">un</a>
	<a id="two">deux</a>
	<a id="three">un</a>
</h3>
<a id="test" href="foo">ici</a>	
</header>
</body>
</html>

Bovino · 26/08/2011, 10h46

Citation:

Envoyé par SpaceFrog

Pas sous IE Bovino ...
La balise header n'est pas reconnue

Pas IE8 en tout cas

Oui, mais ça, c'est pas dû à jQuery mais à IE8 qui n'est pas HTML5 compliant

SpaceFrog · 26/08/2011, 10h54

Ou est l'intéret de faire du html5 actuellement alors ?

dtcSearch · 26/08/2011, 13h26

merci, le coup du find fonctionne à merveille

Ce projet pour moi, que je fais en HTML5, c'est pour commencer et me faire un avis.
Pour le moment, je vois une légère rapidité d'affichage (par rapport au même code en HTML4), pareil sur mobile. Pour le moment, j'en suis qu'ici.
Je compte utiliser par la suite la balise progress puis après, je verrai pour l'aspect non connecté.

26/08/2011, 07h54	#7
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 789 Points : 35 789	Tu ne peux pas dans un même sélecteur à la fois remonter l'arbre DOM puis le redescendre, tu seras donc obligé de le faire en deux étapes : Code : Sélectionner tout - Visualiser dans une fenêtre à part $(this).parent('header').find('h3 a:eq(1)').html() __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

26/08/2011, 10h54	#10
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 040 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 040 Points : 45 141 Points : 45 141	Ou est l'intéret de faire du html5 actuellement alors ? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

25/08/2011, 15h30	#1
dtcSearch Membre habitué Inscription : avril 2009 Messages : 287 Détails du profil Informations forums : Inscription : avril 2009 Messages : 287 Points : 127 Points : 127	Optimisation d'un selector jQuery Bonjour, je souhaiterai savoir si il était possible d'optimiser ça: Code : Sélectionner tout - Visualiser dans une fenêtre à part $(this).parents('header').children('h3').children('a').eq(1).html() J'imaginais que ça: Code : Sélectionner tout - Visualiser dans une fenêtre à part $(this).parents('header>h3>a').eq(1).html() aurai pu marcher mais non je dois mal m'y prendre
	00

26/08/2011, 13h26	#11
dtcSearch Membre habitué Inscription : avril 2009 Messages : 287 Détails du profil Informations forums : Inscription : avril 2009 Messages : 287 Points : 127 Points : 127	merci, le coup du find fonctionne à merveille Ce projet pour moi, que je fais en HTML5, c'est pour commencer et me faire un avis. Pour le moment, je vois une légère rapidité d'affichage (par rapport au même code en HTML4), pareil sur mobile. Pour le moment, j'en suis qu'ici. Je compte utiliser par la suite la balise progress puis après, je verrai pour l'aspect non connecté.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email