recuperer le texte dans un class [Résolu]

durium · 29/06/2011, 00h10

Bonjour à tous
Voila j'utilise jquery actuellement et comme vous pourrez le voir dans le code après plusieurs span ayant la même classe je cherche à les récupérer dans un tableau or

Code :

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

$('.ui-state-default').html();

Ne me donne que le 1er class et je cherche à tous les mettre dans un tableau.
Merçi d'avance pour votre aide
Le code interessant se trouve à partir de la ligne 54

Code html :

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
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
 
<div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="display: block">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
<a class="ui-datepicker-prev ui-corner-all ui-state-disabled" title="Prev">
<span class="ui-icon ui-icon-circle-triangle-w">Prev</span>
</a>
<a class="ui-datepicker-next ui-corner-all" onclick="DP_jQuery_1309192955749.datepicker._adjustDate('#dp1309192955750', +1, 'M');" title="Next">
<span class="ui-icon ui-icon-circle-triangle-e">Next</span>
</a>
<div class="ui-datepicker-title">
<span class="ui-datepicker-month">Juillet</span>
<span class="ui-datepicker-year">2011</span>
</div>
</div>
<table class="ui-datepicker-calendar">
<thead>
<tr>
<th class="ui-datepicker-week-end">
<span title="Lundi">Lu</span>
</th>
<th>
<span title="Mardi">Ma</span>
</th>
<th>
<span title="Mercredi">Me</span>
</th>
<th>
<span title="Jeudi">Je</span>
</th>
<th>
<span title="Vendredi">Ve</span>
</th>
<th>
<span title="Samedi">Sa</span>
</th>
<th class="ui-datepicker-week-end">
<span title="Dimanche">Di</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">1</span>
</td>
<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">2</span>
</td>
</tr>
<tr>
<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">3</span>
</td>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default ui-state-active ui-state-hover">4</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">5</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">6</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">7</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">8</span>
</td>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">9</span>
</td>
</tr>
<tr>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">10</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">11</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">12</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">13</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">14</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">15</span>
</td>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">16</span>
</td>
</tr>
<tr>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">17</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">18</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">19</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">20</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">21</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">22</span>
</td>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">23</span>
</td>
</tr>
<tr>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">24</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">25</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">26</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">27</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">28</span>
</td>
<td class=" ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">29</span>
</td>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">30</span>
</td>
</tr>
<tr>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">31</span>
</td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
<td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td>
</tr>
</tbody>
</table>
</div>

Watilin · 29/06/2011, 01h38

Bonsoir,

tu ne peux pas itérer implicitement avec la méthode .html(). Il faut donc le faire explicitement, avec .map() :

Code JS :

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

1
2
3
$('.ui-state-default').map(function(){
   return $(this).html();
});

danielhagnoul · 29/06/2011, 09h49

Bonjour

J'ai testé sur votre extrait de code, reste à voir ce que cela donnera sur un véritable UI Datepicker, mais je n'ai plus le temps de tester ce matin.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
// Avec jQuery 1.6.1 et moins
$('.ui-state-default').each(function(i, item){
	console.log("élément n° ", i, " = ", item);
 
	// Pour agir sur un élément
	// On met le 15 en rouge
	// i va de 0 à n
	if (i == 14){
		$(item).css("color", "red");
	}
});

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
/*
 * Avec jQuery 1.6.1, la méthode
 * map() a été améliorée.
 * Mais cela ressemble à each()
 */
$('.ui-state-default').map(function(i, item){
	console.log("élément n° ", i, " = ", item);
 
	// Pour agir sur un élément
	// On met le 6 au 12 en bleu
	// i va de 0 à n
	if (i > 4 && i < 12){
		$(item).css("color", "darkBlue");
	}
});

durium · 29/06/2011, 14h09

Ok merci beaucoup à toi danielhagnoul
Ton code fonctionne super bien il me reste plus que deux trois détails à terminer

danielhagnoul · 30/06/2011, 01h56

Bonsoir

Voici mon test sur un UI Datepicker :

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
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
102
103
104
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/humanity/jquery-ui.css">
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css" />
	<style>
		/* Base */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0px; padding:0px; }
		body {background-color:rgba(210, 214, 98, 0.5); color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:serif; padding:6px; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur {width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* article */
		/*
		.conteneur {border-spacing:4px; }
		.ligne {display:table-row; }
		article {display:table-cell; text-align:center; vertical-align:middle; border:1px dotted grey; }
		article:nth-of-type(1) {width:400px; height:120px; }
		*/
 
		/* -- */
 
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<p>Date: <input type="text" id="datepicker" size="50"/></p>
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2011-06-30T02:00:00.000+02:00" pubdate>2011-06-30</time> <span itemprop="name">Daniel Hagnoul</span> <a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.2rc1.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/i18n/jquery-ui-i18n.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<script>
		$(function(){
			/* -- */
			$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
 
			$("#datepicker").datepicker({
				changeMonth: true,
				changeYear: true,
				showButtonPanel: true,
				showOn: "button",
				buttonText: "Choisir une date",
				dateFormat: "DD, d MM yy"
			});
 
			/* jPicker : http://www.digitalmagicpro.com/jPicker/, outil pour choisir rapidement une couleur */
			$.fn.jPicker.defaults.images.clientPath="http://danielhagnoul.developpez.com/lib/jPicker/images/";
			$(".conteneur").jPicker({window:{expandable:true,title:"jPicker : choissisez une couleur :",
			alphaSupport:true,position:{x:'screenCenter',y:'top'}},color:{ active:new $.jPicker.Color({ r: 210, g: 214, b: 98, a: 128 })}},
			function(color, context){var c = color.val("all");if (c){$("body").css("backgroundColor", "rgba(" +
			c.r + "," + c.g + "," + c.b + "," + (c.a/255).toFixed(2) + ")");}});
		});
 
		$(window).load(function(){
			/*
			 * On peut colorer les dates en réutilisant une partie
			 * de l'astuce mise au point pour :
			 * http://danielhagnoul.developpez.com/jqueryui/datepicker/datepicker.php
			 * et http://danielhagnoul.developpez.com/jqueryui/datepicker/bonus.php
			 */
 
			$("#ui-datepicker-div").bind("mouseover", function(){
				$('.ui-state-default').each(function(i, item){
					/*
					 * On peut colorer les jours du mois au choix
					 * Mais la même coloration pour tous les mois
					 * de toutes les années. Si l'on veut colorés
					 * des dates précises, voir les liens ci-dessus.
					 */
					if (i > 4 && i < 12){
						$(item).css("color", "red");
					}
				});
			});
 
			// nécessaire s'il n'y a pas de bouton
			$("#datepicker").click(function(){
				$("#ui-datepicker-div").mouseover();
			});
 
			// nécessaire s'il y a un bouton
			$("button.ui-datepicker-trigger").click(function(){
				$("#ui-datepicker-div").mouseover();
			});
		});
	</script>
</body>  
</html>

29/06/2011, 14h09	#4
durium Invité de passage Inscription : juin 2011 Messages : 12 Détails du profil Informations forums : Inscription : juin 2011 Messages : 12 Points : 4 Points : 4	Ok merci beaucoup à toi danielhagnoul Ton code fonctionne super bien il me reste plus que deux trois détails à terminer
	00

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