aide sur selecteur

Version imprimable

aide sur selecteur

bonjour,

j'ai plusieurs éléments qui se répètent. Sur ces éléments, j'y ajoute un évènement pour effectuer un traitement.

J'ai donc besoin de les manipuler indépendamment.

Structure html =
Code:

1 2 3 4 5 6 7 8 <a href="..." class="tooltipArticle" title="..." onclick="..."> <div class="itemArticle"> <div class="iconeArticle"></div> <div class="titre">TITRE</div> <div class="date">DATE</div> <div id="preview#COMPTEUR_BOUCLE" class="apercu">CONTENU</div> </div> </a>
j'ai besoin de faire quelquechose du genre :
Code:

1 2 3 4 $("a.tooltipArticle").bind("mouseover", function(e){ this.title = $("a.tooltipArticle .titre").text(); });
mais ainsi, mon title prends l'ensemble des titres de chaques elements a.tooltipArticle.

J'ai donc plus besoin de faire ceci mais la combinaison this + class ne semble pas fonctionner :
Code:

1 2 3 4 $("a.tooltipArticle").bind("mouseover", function(e){ this.title = $(this).$(".titre").text(); });

10/12/2009, 11h03
boutmos
je progresse mais me manque encore quelquechose.

J'ai donc fais ceci :
Code:

1 2 this.title = $(this).children(".titre").text();
mais mon this.title reste vide :/
10/12/2009, 11h33
boutmos
j'ai trouvé :D

il faut faire comme ceci :
Code:

1 2 this.title = $(".titre", this).text();

Bonjour.

Exemple :

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
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
<!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:#FFFFFF;
			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 */
		a.tooltipArticle {
			display:block;
			width:300px;
			height:inherit;
			margin:12px;
			padding:6px;
			border:1px solid black;
		}
		div.itemArticle div {
			height:20px;
		}
	</style>
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("a.tooltipArticle").mouseenter(function(){
				$(this).attr("title",$(this).find("div.titre").text());
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<div id="affiche"></div>
 
		<a href="#" class="tooltipArticle" title="un titre">
			<div class="itemArticle">
				<div class="iconeArticle"></div>
				<div class="titre">TITRE A1</div>
				<div class="date">DATE</div>
				<div id="preview#COMPTEUR_BOUCLE" class="apercu">CONTENU</div>
			</div>
		</a>
 
		<a href="#" class="tooltipArticle" title="un titre">
			<div class="itemArticle">
				<div class="iconeArticle"></div>
				<div class="titre">TITRE A2</div>
				<div class="date">DATE</div>
				<div id="preview#COMPTEUR_BOUCLE" class="apercu">CONTENU</div>
			</div>
		</a>
 
		<a href="#" class="tooltipArticle" title="un titre">
			<div class="itemArticle">
				<div class="iconeArticle"></div>
				<div class="titre">TITRE A3</div>
				<div class="date">DATE</div>
				<div id="preview#COMPTEUR_BOUCLE" class="apercu">CONTENU</div>
			</div>
		</a>
 
	</div>
</body>
</html>

10/12/2009, 13h01
boutmos

merci pour ta méthode. Je reste finalement sur celle que j'ai trouvé, elle est plus condensée et plus facile a lire :D