Modifier le style d'un élement DIV de l'élement qui suit celui que je sélectionne
bonjour,
je vais simplifier mon problème pour être facilement compréhensible .
(contexte de mon cas : imaginer vous êtes dans une voiture et vous interrogez l'ordinateur de bord de la voiture qui vous suit pour savoir sa vitesse, en fonction d'elle vous lui imposez une distance de sécurité. cette distance sera matérialisée par un margin-top).
j'ai un tableau de 5 colonnes (disons 5 voies de circulation par exemple) .
chaque TD comporte plusieurs (ou aucun) élements div de class BOITE. (disons qu'une boite est une voiture)
chaque boite contient une propriété data-debut et data-fin
mon objectif est d'ajouter un margin-top à l'élément BOITE qui suit celui que je suis en train de lire.
la valeur de ce margin doit correspondre à la différence entre data-fin de l'élement en cours et le data-debut de l'élement suivant.
là où je coince pour l'instant c'est que j'arrive pas à obtenir le data-debut de l'élement suivant avec mon instruction qui renvoie un NaN d'après mon instruction alert:
Code:
var debut=$(this).find(".boite").next().attr( "data-debut" );
j'arrive bien à faire la boucle colonne par colonne avec :
Code:
$("#montableau td:lt(5)").each(function(){
mon html de test est simplifié comme ç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
| <style>
.boite {background-color:cyan; border: solid thin;}
</style>
<table id="montableau">
<tr>
<td>colonne1</td>
<td>colonne2</td>
<td>colonne3</td>
<td>colonne4</td>
<td>colonne5</td>
</tr>
<tr>
<td>
<div class="boite" data-debut=400 data-fin=700>
<div class="contenu">contenu1</div>
</div>
<div class="boite" data-debut=900 data-fin=1000>
<div class="contenu">contenu2 à +200</div>
</div>
<div class="boite" data-debut=1400 data-fin=1600>
<div class="contenu">contenu3 à +400</div>
</div>
</td>
<td>
<div class="boite" data-debut=800 data-fin=1000>
<div class="contenu">contenu8</div>
</div>
<div class="boite" data-debut=2000 data-fin=2100>
<div class="contenu">contenu9 à +1000</div>
</div>
</td>
<td>
<div class="boite" data-debut=500 data-fin=800>
<div class="contenu">contenu10</div>
</div>
</td>
<td>rien à faire</td>
<td>
<div class="boite" data-debut=400 data-fin=800>
<div class="contenu">contenu21</div>
</div>
</td>
</tr> |
et donc je veux obtenir ça (repéré <!-- Style -->( lignes 15, 18 et 26)):
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
| <table id="montableau">
<tr>
<td>colonne1</td>
<td>colonne2</td>
<td>colonne3</td>
<td>colonne4</td>
<td>colonne5</td>
</tr>
<tr>
<td>
<div class="boite" data-debut=400 data-fin=700>
<div class="contenu">contenu1</div>
</div>
<div class="boite" data-debut=900 data-fin=1000 style="margin-top:200px"> <!-- Style -->
<div class="contenu">contenu2 à +200</div>
</div>
<div class="boite" data-debut=1400 data-fin=1600 style="margin-top:400px"> <!-- Style -->
<div class="contenu">contenu3 à +400</div>
</div>
</td>
<td>
<div class="boite" data-debut=800 data-fin=1000>
<div class="contenu">contenu8</div>
</div>
<div class="boite" data-debut=2000 data-fin=2100 style="margin-top:1000px"> <!-- Style -->
<div class="contenu">contenu9 à +1000</div>
</div>
</td>
<td>
<div class="boite" data-debut=500 data-fin=800>
<div class="contenu">contenu10</div>
</div>
</td>
<td>rien à faire</td>
<td>
<div class="boite" data-debut=400 data-fin=800>
<div class="contenu">contenu21</div>
</div>
</td>
</tr> |
Le raisonnement que j'essaie d'employer pour faire mon script est le suivant :
1. déjà je parse chaque colonne (donc chaque TD) afin de prendre en considération QUE les boites de chacune
2. je sélectionne chaque élement de type BOITE
3. pour chacun, je regarde si ya un suivant (utilisation de NEXT)
4. si oui, alors je lis sa data-debut et fait la différence avec mon data_debut et je l'impacte dans son margin-top
pour l'instant j'essaie de le faire JUSTE sur le premier et le suivant (j'arrive pas encore à le faire sur tous) :
Code:
1
2
3
4
5
6
7
8
9
10
11
| $("#montableau td:lt(5)").each(function(){ //pour chacune des 5 colonnes du tableau
var fin=$(this).find(".boite").first().attr( "data-fin" ); // on choppe les valeurs de fin de celui en cours
var debut=$(this).find(".boite").next().attr( "data-debut" ); // on choppe les valeurs de debut du suivant
var ecart=fin-debut;
alert(fin);
alert(debut);
alert(ecart)
$(this).find(".boite").next().css("margin-top", ecart);
}); //fin du each_function |
Mon navigateur n'indique pas d'errerur JS, du coup, je bloque depuis des heures et hier soir. Pourquoi first marche mais pas next...mystère.
Toute piste est la bienvenue... espérant que c'est évident mon erreur....
