Optimisation d'un selector jQuery

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

Optimisation d'un selector jQuery

jQuery

Vue hybride

Discussions similaires

Partager

Partager