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

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

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

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

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

cette partie bouclée fonctionne très bien ,c'est la détection du "si il y a une boite suivante" qui pose souci malgré le fait que chaque boite est bien itérée

cette ligne ne laisse rien passer :

Code :

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

if ($(this).index() > 0) {... }

lors de la premiere boite, index vaut 0
lors de la seconde boite, index vaut 0 aussi

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

est-ce que le fait que mes div boite soient encapsulées dans des span ferait "dérailler" le .next

initialement j'ai simplifié mon exemple des boites successives à

Code html :

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

<td><div class="boite">...</div><div class="boite">...</div></td>

alors qu'en fait c'est :

Code html :

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

<td><span class="toto"><span><div class="boite">...</div></span></span><span class="toto"><span><div class="boite">...</div></span></span></td>

est-ce que le .next(.boite) se souci que de la collection de même "parent" ? ce serait l'erreur ?

**Toufik83** · 22/10/2020, 12h42

Bonjour,

En faite ton code html n'est pas bon, car on ne peut pas mettre un <div> dans un <span> selon le w3cValidator, et ce n'est pas ça qui déraille le fonctionnement du script js, mais c'est parce que tu mets chaque ".boite" dans son propre <div> parent alors que moi j'ai testé l'exemple en utilisant une structure simple (celle que tu as mis dans ton dernier message), et c'est la raison pour laquelle que $(this).index() retourne toujours 0 vu que .boite est l'enfant unique de son parent directe

.

Ce n'est pas grave, on peut donc adapter le script en utilisant $.closest() afin qu'il fonctionne avec la structure actuelle.

Il faut remplacer les <span> par des <div> et attribuer une classe class="maClass" aux div ayant un id :

Code html :

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

1
2
3
4
5
6
 
<div id="el1_v_edt_voies_lanne1" class="maClass">
     <div>
          <div data-debut="540" data-fin="600" data-speed="60" class="boite"...></div>
     </div>
</div>

Et vu que le tableau contient un tbody, on peut donc ne plus utiliser :gt() et le remplacer par tbody :

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
 
var espacement=5;
$("#montableau tbody tr td")
.each(function() { //pour chaque colonne du tableau
	if ($(this).index() < 5) {//si l'index de la colonne (td) est < 5
		if ($(this).find('.boite').length > 1) {//si le td contient au moins 2 ".boite"
			$(this).find('.boite')
			.each(function() {
				if ($(this).closest('.maClass').index() > 0) {//si l'index du PARENT SUPERIEUR AYANT LA CLASS .maClass de ".boite" parcouru n'est pas le premier
				    espacement=$(this).attr('data-debut') 
                                     -$(this).closest('.maClass')//remonter au parent supérieur .maClass de .boite parcouru
                                        .prev(".maClass")//cibler .maClass qui le précède
                                        .find('.boite').attr('data-fin');
                                       console.log("l'espacement pour data-debut :",$(this).attr('data-debut'),", data-fin :",$(this).attr('data-fin')," est :",espacement);//voir l'espacement calculé dans la console...
			             $(this).css("marginTop",espacement);
				}
			});
		}
	}
});

**NoSmoking** · 22/10/2020, 17h26

Bonjour,

Envoyé par Toufik83

En faite ton code html n'est pas bon, car on ne peut pas mettre un <div> dans un <span> selon le w3cValidator, et ce n'est pas ça qui déraille le fonctionnement du script js, mais ...

Cela peut arriver, jQuery travaille sur le DOM « rendu » par le navigateur et non sur le DOM que l'on croit être bon après avoir écrit notre HTML et ceux-ci peuvent être différent.

Par curiosité j'aimerais quand même savoir pourquoi en arriver à une structure tant capillotractée !?!

Ceci étant, il me semble que vous n’exploitez pas assez la puissance des sélecteurs CSS et des méthodes inusitées de jQuery.

Je ferais une approche bien différente en ciblant uniquement les éléments possédant un attribut data-debut, pour pouvoir parcourir ceux-ci, donc un

Code :

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

1
2
3
const $elements = $("[data-debut]");
$elements.each(function(ind, el) {
});

ensuite on peut utiliser la méthode index() pour connaitre l'élément suivant dans la liste par exemple

Code :

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

1
2
3
4
5
6
7
8
const $elements = $("[data-debut]");
$elements.each(function(ind, el) {
  // les éléments consécutifs
  const $thisElement = $(el);
  const $elemSuivant = $elements.eq(ind + 1);
  console.log("this :", $thisElement);
  console.log("next :", $elemSuivant);
});

après il suffit de regarder si ils ont le même parent(), ou closest() <td> et procéder en fonction du résultat, ce qui pourrait donner au final :

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
const $elements = $("[data-debut]");
$elements.each(function(ind, el) {
  // les éléments consécutifs
  const $thisElement = $(el);
  const $elemSuivant = $elements.eq(ind + 1);
  console.log("this :", $thisElement);
  console.log("next :", $elemSuivant);
  // ici test si même parent
  if ($elemSuivant.parent("td")[0] === $thisElement.parent("td")[0]) {
    const margin = $elemSuivant.data("debut") - $thisElement.data("fin");
    if (!isNaN(margin)) {    // pas vraiment nécessaire le CSS ne serait pas validé
      console.log("à prendre en compte : ", margin);
      $elemSuivant.css({
        "margin": margin + "px"
      });
    }
  }
  else {
    console.log("non pris en compte, au suivant !!!");
  }
});

Cela me parait plus concis et il y a sûrement des tests à ajouter !

Ma curiosité sur le pourquoi cette structure, reste entière

**clavier12AZQSWX** · 22/10/2020, 18h01

bonjour (et déjà 1000 merci).

je ne pouvais pas ajouter une class '.maClass' (car une partie du code m'est envoyé et je traite en post-traitement).
Par contre j'ia pu rétablir les div de class .boite toute dans le même parent (comme mon exemple initiale du coup).
et Effectivement votre première propostiion de code fonctionnait déjà !

bravo !

...par contre..... j'ai bien dit dans mon premier post que c'était la premiere boite qui devait modifier la boite suivante.
et votre solution fait l'inverse, c'est la seconde boite qui comprend qu'elle a une boite devant et adapte sa distance.
Graphiquement le résultat est le même , ya pas de guéguerre mais sémantiquement c'est différent (je sais je pointille).

je vous rassure je ne suis pas en train de faire un simulateur de conduite autonome avec des voitures qui s’échangeraient les données pour s'auto-adapter à la distance de sécurité

Je ne travaille pas chez tesla du tout !

Pour le plaisir, je me suis même offert un .animate histoire de faire joli à l'écran

Code :

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

1
2
//$(this).css("marginTop",espacement);
$(this).animate({ 'marginTop' : espacement }, "slow");

Je sais pas pour vous, mais moi j'ai passé plus de 6h à faire ce machin !

sayonara sen san !

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

jQuery

Discussions similaires

Partager

Partager