Bonjour,


Afin d'afficher des résultats sous forme de graphique, je souhaite analyser le code HTML d'un bloque, puis faire appel à du AJAX qui va appeler un script PHP/MySQL et afficher le graph.

LE code a analyser est le suivante

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
 
<div id="graph" class="row">
	<div class="col-md-12">
<!-- premier bloque -->
		<div class="card" data-family="2">
			<div class="card-header">
				<h4 class="card-title">Températures</h4>
				<p class="card-category"></p>
			</div>
 
			<div class="card-body" data-yaxis0="5" data-yaxis1="0" data-familyname="temperature">
				<div class="chart-container" id="container-temperature">
					<canvas class="canvas" id="temperature"></canvas>
					<div class="chartLoading">
						<img src="img/ajax-loader.gif" />
					</div>	
				</div>
				<p></p>
			</div>
		</div>
<!-- Deucième bloque -->
		<div class="card" data-family="3">
			<div class="card-header">
				<h4 class="card-title">Pression atmosphérique et humidité de l'air</h4>
				<p class="card-category"></p>
			</div>
			<div class="card-body" data-yaxis0="6" data-yaxis1="7" data-familyname="baro">
				<div class="chart-container" id="container-baro">
					<canvas class="canvas" id="baro"></canvas>
					<div class="chartLoading">
						<img src="img/ajax-loader.gif" />
					</div>	
				</div>
				<p></p>
			</div>
		</div>
	</div>
</div>

Évidement, le code de ma page est plus complet.

Ce que je dois faire,

J'aimerais que mon jquery analyse tout de qu'il se trouve dans
Code : Sélectionner tout - Visualiser dans une fenêtre à part
<div id="graph" class="row">
Il parcourt tous les <div> enfant, jusqu'à ce qu'il renconrtre
data-family
Il doit enregistrer sa valeur.

puis il continue et quand il rencontre la class
class="card-body"
il doit enregistrer les valeurs de

data-yaxis0
data-yaxis1
data-familyname
Une fois que j'aurais les valeurs de
data-family
data-yaxis0
data-yaxis1
data-familyname
je ferai appel à ma fonction AJAX et le graphique s'affichera en fonction des valeurs extraites de la base de donnée.

Puis Jquery, continue sur le deuxième bloque et affichera le deuxième graphique.
(Il y a plus de 3 bloques)

Je pensais utiliser le each() et le find(), mais a dire vrai, je ne vois pas comment pour parcourir mes bloques comme indiqué plus haut

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
 
$('#grap').each(function( index ) {
   console.log($( this ).find("card-body").attr("data-yaxis0"));
   console.log($( this ).find("card-body").attr("data-yaxis1"));
   console.log($( this ).find("card-body").attr("data-familyname"));
});

Je vous remercie pour vos lumières