Modifier le style d'un élement DIV de l'élement qui suit celui que je sélectionne

**clavier12AZQSWX** · 21/10/2020, 11h11

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 :

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

var debut=$(this).find(".boite").next().attr( "data-debut" );

j'arrive bien à faire la boucle colonne par colonne avec :

Code :

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

$("#montableau td:lt(5)").each(function(){

mon html de test est simplifié comme ça :

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
<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é ( lignes 15, 18 et 26)):

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
<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 :

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

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....

**Toufik83** · 21/10/2020, 12h41

Bonjour,

Pour le NaN c'est évident, car le premier <tr> ne contient aucun élément .boite, cela dit qu'il faut l'exclure de la boucle each.

Rien ne t'empêche d'utiliser des $.each imbriqués.

J'ai utilisé prev() au lieu de next().

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$("#montableau tr:gt(0) td")
.each(function() { //pour chacune des 5 colonnes du tableau 
    if ($(this).index() < 5) {//si l'index du td est < 5
      if ($(this).find('.boite').length > 1) {//si le td contient au moins 2 ".boite"
        $(this).find('.boite')
          .each(function() {
            if ($(this).index() > 0) {//si l'index le .boite n'est pas le premier             
                 $(this).css("marginTop",$(this).attr('data-debut') -$(this).prev('.boite').attr('data-fin'));
            }
          });
      }
    }
});

Puis un vertical-align:top appliqué aux td.

Du coup tu dois supprimer le :lt(5) du sélecteur #montableau tr:gt(0) td:lt(5) et le remplacer par la condition if ($(this).index() < 5), car si on ajoute d'autres <tr> au dessous cela ne fonctionnera que sur le premier <tr>.

Le fait d'utiliser tr:gt(0) td:lt(5) jQuery sélectionnera les <td> existant dans les <tr> ayant un index>0 et à ce moment là, les indexes des <td> sont recalculés comme ça :

Code html :

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

1
2
3
4
 
<tr><td>index 0</td><td>index 1</td><td>index 2</td><td>index 3</td><td>index 4</td></tr>
<tr><td>index 5</td><td>index 6</td><td>index 7</td><td>index 8</td><td>index 9</td></tr>
......

Si par-contre tu veux garder le :lt(5), tu peux par exemple attribuer une class class="ligne" aux <tr> en question puis tu modifies le sélecteur de $.each comme suite #montableau tr.ligne td:lt(5)

**clavier12AZQSWX** · 22/10/2020, 10h12

bonjour Toufik83,

merci pour vos suggestions, je suis en train de tester et débugger.

il y a 2 bugs (je continue mes recherches pour les résoudre, mais je détaille les effets quand-même) :

1.
le script s'effectuer 5fois (les 5 colonnes sont analysées 5 fois).
j'ai ajouté un alert (ligne2) avant le début pour être certain que c'était pas ma page qui se reloadait.
et ainsi la ligne5 s'affiche 25fois.
est-ce parce que j'ai 5 TR dont 4 vides...je vais tester. voir si on peut pas exclure les <td></td> (cellule sans boite) de la boucle.

2.
la boite suivante n'est jamais détectée.
quelque chose doit dérailler avec la ligne13: if ($(this).index() > 0) , la condition n'est jamais validée.

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
var espacement=5
	alert("avant script");
	$("#montableau tr:gt(0) td")
		.each(function() { //pour chacune des 5eres colonnes du tableau
			alert("407: pour chaque colonne");
			if ($(this).index() < 5) {//si l'index du td est < 5
				alert("409: prise de colonne "+$(this).index());
			  if ($(this).find('.boite').length > 1) {//si le td contient au moins 2 ".boite"
				alert("411: au moins 2 boites trouvées");
				$(this).find('.boite')
				  .each(function() {
					alert("414 cette boite");
					if ($(this).index() > 0) {//si l'index de .boite n'est pas le premier
						alert("416 une boite avec une suivante");
						espacement=$(this).attr('data-debut') -$(this).prev('.boite').attr('data-fin');
						 //$(this).css("marginTop",$(this).attr('data-debut') -$(this).prev('.boite').attr('data-fin'));
						 alert(espacement);
					}
				  });
			  }
			}
		});

Je continue à débugger..tester..

**clavier12AZQSWX** · 22/10/2020, 10h28

re bonjour,

ok pour le souci du bug1,

1.
le script s'effectuer 5fois (les 5 colonnes sont analysées 5 fois).
j'ai ajouté un alert (ligne2) avant le début pour être certain que c'était pas ma page qui se reloadait.
et ainsi la ligne5 s'affiche 25fois.
est-ce parce que j'ai 5 TR dont 4 vides...je vais tester. voir si on peut pas exclure les <td></td> (cellule sans boite) de la boucle.

j'ai ajouté une condition pour éviter les TD vide:

Code :

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

if ($(this).index()<5 && $(this).html() != '') {//si l'index du td est < 5

pour le souci 2, je continue de chercher...

**clavier12AZQSWX** · 22/10/2020, 10h45

re-bonjour,

pour le souci 2 :

la boite suivante n'est jamais détectée.
quelque chose doit dérailler avec la ligne13: if ($(this).index() > 0) , la condition n'est jamais validée.

j'ai constaté que $(this).index() renvoie toujours 0.
en fait c'est le next qu'il faut vérifier mais étrangement if ($(this).next('.boite').index() > 0) ne fonctionne pas non plus....

je cherche...

**clavier12AZQSWX** · 22/10/2020, 11h03

vraiment étrange, je n'arrive pas à rentrer dans la partie après la condition.

$(this).index() > 0 vaut toujours 0

et j'ai tenté aussi :

$(this).next(".boite"). index() > 0 vaut toujours 0 aussi, $(this).next(".boite")[0] et même $(this).next(".boite").length vaut toujours 0 alors qu'il y a plusieurs éléments ".boite"

il doit y avoit une coquille ou une subtilité qqpart que je perçois pas....

**Toufik83** · 22/10/2020, 10h58

Bonjour,

Un conseil est d'utiliser console.log au lieu des alertes et voir ce que ça donne dans l'onglet console de l'outil de développement .

Pour le premier point, c'est tout à fait normal que l'alerte s'affiche plusieurs fois, car $.each est une boucle qui parcourt les tr 1 2 3 4 et 5.

Pour le deuxième point, le code à l'intérieur de la fonction $(this).find('.boite').each(function(){...}) n'est exécuté que si et seulement si le parent <td> contient au moins 1 .boite, donc pour un <td> vide ce code n'est pas exécuté.

J'ai testé le code avant de le poster, il y'a probablement une différence entre la structure du tableau que j'ai testé et le tien, peux-tu montrer le code html du tableau?

**clavier12AZQSWX** · 22/10/2020, 11h32

Envoyé par Toufik83

Bonjour,

Un conseil est d'utiliser console.log au lieu des alertes et voir ce que ça donne dans l'onglet console de l'outil de développement .

Pour le premier point, c'est tout à fait normal que l'alerte s'affiche plusieurs fois, car $.each est une boucle qui parcourt les tr 1 2 3 4 et 5.

Pour le deuxième point, le code à l'intérieur de la fonction $(this).find('.boite').each(function(){...}) n'est exécuté que si et seulement si le parent <td> contient au moins 1 .boite, donc pour un <td> vide ce code n'est pas exécuté.

J'ai testé le code avant de le poster, il y'a probablement une différence entre la structure du tableau que j'ai testé et le tien, peux-tu montrer le code html du tableau?

voilà un extrait du rendu html du tableau (sans la structure css).
j'avais simplifié mon exemple en disant pas que dans les div de class boite, il y a d'autres div de classe differentes. est-ce que cela peut influer sur les .next et .prev ? je ne pense pas car on a utilisé le selecteur de class. de même j'ai aps parlé des tbody et th, ça ne doit pas bousculer les choses.

mon html si ça peut aider :

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
<table id="montableau">
<thead>
	<tr class="ew-table-header">
			<th data-name="lanne1" class="ew-table-header-cell" style="text-align: center; font-weight: bolder;"><div id="elh_v_edt_voies_lanne1" class="v_edt_voies_lanne1"><div class="ew-table-header-caption">lanne1</div></div></th>
				<th data-name="lanne2" class="ew-table-header-cell" style="text-align: center; font-weight: bolder;"><div id="elh_v_edt_voies_lanne2" class="v_edt_voies_lanne2"><div class="ew-table-header-caption">lanne2</div></div></th>
				<th data-name="lanne3" class="ew-table-header-cell" style="text-align: center; font-weight: bolder;"><div id="elh_v_edt_voies_lanne3" class="v_edt_voies_lanne3"><div class="ew-table-header-caption">lanne3</div></div></th>
				<th data-name="lanne4" class="ew-table-header-cell" style="text-align: center; font-weight: bolder;"><div id="elh_v_edt_voies_lanne4" class="v_edt_voies_lanne4"><div class="ew-table-header-caption">lanne4</div></div></th>
				<th data-name="lanne5" class="ew-table-header-cell ew-table-last-col" style="text-align: center; font-weight: bolder;"><div id="elh_v_edt_voies_lanne5" class="v_edt_voies_lanne5"><div class="ew-table-header-caption">lanne5</div></div></th>
		</tr>
</thead>
<tbody>
	<tr data-rowindex="1" id="r1_v_edt_voies" data-rowtype="1" class="ew-table-row">
			<td data-name="lanne1">
<span id="el1_v_edt_voies_lanne1">
<span><div data-debut="540" data-fin="600" data-speed="60" class="boite" style="cursor: pointer; height: 90px;" ondblclick="location.href='edt_v01_edit.php?edt_id=207';"><div class="sequence">19/10/2020 : grp0</div><div class="timing">09:00-10:00</div><div class="marque">odisseus</div><div class="driver">Will Schuester, GLEE</div><div class="txt">voie43 Groupe 73 19/10/2020 Actarus GOLDORAK,Jayce ET LES CONQUÉRANTS DE LA LUMIÈRE,alcor GOLDORAK</div><div class="tonno">tonno : Cathédrale</div></div></span>
</span>
 
<span id="el2_v_edt_voies_lanne1">
<span><div data-debut="660" data-fin="750" data-speed="90" class="boite" style="cursor: pointer; height: 135px;" ondblclick="location.href='edt_v01_edit.php?edt_id=204';"><div class="sequence">19/10/2020 : grp0</div><div class="timing">11:00-12:30</div><div class="marque">condor</div><div class="driver">Will Schuester, GLEE</div><div class="txt">voie43 Groupe 73 19/10/2020 Actarus GOLDORAK,Jayce ET LES CONQUÉRANTS DE LA LUMIÈRE,alcor GOLDORAK</div><div class="tonno">tonno : Cathédrale</div></div></span>
</span>
 
<span id="el3_v_edt_voies_lanne1">
<span><div data-debut="1020" data-fin="1080" data-speed="60" class="boite" style="cursor: pointer; height: 90px;" ondblclick="location.href='edt_v01_edit.php?edt_id=213';"><div class="sequence">19/10/2020 : grp0</div><div class="timing">17:00-18:00</div><div class="marque">rotor</div><div class="driver">Will Schuester, GLEE</div><div class="txt">voie43 Groupe 73 19/10/2020 Actarus GOLDORAK,Jayce ET LES CONQUÉRANTS DE LA LUMIÈRE,alcor GOLDORAK</div><div class="tonno">tonno : Saint-Martin</div></div></span>
</span>
</td>
				<td data-name="lanne2">
<span id="el1_v_edt_voies_lanne2">
<span></span>
</span>
 
<span id="el2_v_edt_voies_lanne2">
<span></span>
</span>
 
<span id="el3_v_edt_voies_lanne2">
<span></span>
</span>
</td>
				<td data-name="lanne3">
<span id="el1_v_edt_voies_lanne3">
<span></span>
</span>
 
<span id="el2_v_edt_voies_lanne3">
<span></span>
</span>
 
<span id="el3_v_edt_voies_lanne3">
<span></span>
</span>
</td>
				<td data-name="lanne4">
<span id="el1_v_edt_voies_lanne4">
<span></span>
</span>
 
<span id="el2_v_edt_voies_lanne4">
<span></span>
</span>
 
<span id="el3_v_edt_voies_lanne4">
<span></span>
</span>
</td>
				<td data-name="lanne5" class="ew-table-last-col">
<span id="el1_v_edt_voies_lanne5">
<span></span>
</span>
 
<span id="el2_v_edt_voies_lanne5">
<span></span>
</span>
 
<span id="el3_v_edt_voies_lanne5">
<span></span>
</span>
</td>
		</tr>
	<tr data-rowindex="2" id="r2_v_edt_voies" data-rowtype="1" class="ew-table-alt-row">
			<td data-name="lanne1"></td>
				<td data-name="lanne2"></td>
				<td data-name="lanne3"></td>
				<td data-name="lanne4"></td>
				<td data-name="lanne5" class="ew-table-last-col"></td>
		</tr>
	<tr data-rowindex="3" id="r3_v_edt_voies" data-rowtype="1" class="ew-table-row">
			<td data-name="lanne1" class="ew-table-last-row"></td>
				<td data-name="lanne2" class="ew-table-last-row"></td>
				<td data-name="lanne3" class="ew-table-last-row"></td>
				<td data-name="lanne4" class="ew-table-last-row"></td>
				<td data-name="lanne5" class="ew-table-last-col ew-table-last-row"></td>
		</tr>
</tbody>
</table>

Modifier le style d'un élement DIV de l'élement qui suit celui que je sélectionne

jQuery

Vue hybride

Discussions similaires

Partager

Partager