Optimisation d'un selector jQuery

Version imprimable

25/08/2011, 15h30
dtcSearch

Optimisation d'un selector jQuery

Bonjour,

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

Code:

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

J'imaginais que ça:

Code:

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

aurai pu marcher mais non :( je dois mal m'y prendre

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

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

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:

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:

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/ ?

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

Code:

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:

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

Spaffy,
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 <!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) ;)

le truc c'est que ça:

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

26/08/2011, 07h54
Bovino

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:

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

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:

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>

26/08/2011, 10h46
Bovino

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 :aie:
26/08/2011, 10h54
SpaceFrog

Ou est l'intéret de faire du html5 actuellement alors ?
26/08/2011, 13h26
dtcSearch

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é.