Comment faire une boucle

Fermé
Maxime - Modifié le 26 févr. 2019 à 11:47
 Maxime - 26 févr. 2019 à 17:02
Bonjour, je cherche à faire une boucle sur mes div comment puis-je faire merci.

3 réponses

<!DOCTYPE html>
<html>
<head>
	<title>Mosaique</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="styles/styles.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
	
                                         <!-- LES CHANNELS -->

<body>
  	<div class="wrapper">
  		<div id="channel-viceland" class="img-wrapper">
  			<img id="channel-viceland-img" class="video" src="./images-et-video/viceland.jpg" onload="this.onload=null; this.src=getImages('viceland');"  
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">VICELAND</span>
  		</div>
  		<div id="channel-rmc-sport" class="img-wrapper">
  			<img id="channel-rmc-sport-img" class="video" src="./images-et-video/rmc-sport.jpg" onload="this.onload=null; this.src=getImages('rmc-sport');"  
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">RMC SPORT</span>
  		</div>
  		<div id="channel-lci" class="img-wrapper">
  			<img id="channel-lci-img" class="video" src="./images-et-video/lci.jpg" onload="this.onload=null; this.src=getImages('lci');"
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">LCI</span>
  		</div>
  		<div id="channel-vision tv" class="img-wrapper">
  			<img id="channel-vision-tv-img" class="video" src="./images-et-video/vision-tv.jpg" onload="this.onload=null; this.src=getImages('vision-tv');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">VISION TV</span>
  		</div>
  		<div id="channel-loutre tv" class="img-wrapper">
  			<img id="channel-loutre-img" class="video" src="./images-et-video/loutre-tv.jpg" onload="this.onload=null; this.src=getImages('loutre-tv');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">LOUTRE TV</span>
  		</div>
  		<div id="channel-farming" class="img-wrapper">
  			<img id="channel-farming-img" class="video" src="./images-et-video/farming.jpg" onload="this.onload=null; this.src=getImages('farming');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">FARMING</span>
  		</div>
  		<div id="channel-nrj12" class="img-wrapper">
  			<img id="channel-nrj12-img" class="video" src="./images-et-video/nrj12.jpg" onload="this.onload=null; this.src=getImages('nrj12');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">NRJ12</span>
  		</div>
  		<div id="channel-arte" class="img-wrapper">
  			<img id="channel-arte-img" class="video" src="./images-et-video/arte.jpg" onload="this.onload=null; this.src=getImages('arte');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">ARTE</span>
  		</div>
  		<div id="channel-bein sport" class="img-wrapper">
  			<img id="channel-bein-sport-img" class="video" src="./images-et-video/bein-sport.jpg" onload="this.onload=null; this.src=getImages('bein-sport');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">BEIN SPORT</span>
  		</div>
  		<div id="channel-lbc" class="img-wrapper">
  			<img id="channel-lbc-img" class="video" src="./images-et-video/lbc.jpg" onload="this.onload=null; this.src=getImages('lbc');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">LBC</span>
  		</div>
  		<div id="channel-bfm" class="img-wrapper">
  			<img id="channel-bfm-img" class="video" src="./images-et-video/bfm.jpg" onload="this.onload=null; this.src=getImages('bfm');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">BFM</span>
  		</div>
  		<div id="channel-paysage tv" class="img-wrapper">
  			<img id="channel-paysage tv-img" class="video" src="./images-et-video/paysage-tv.jpg" onload="this.onload=null; this.src=getImages('paysage-tv');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">PAYSAGE TV</span>
  		</div>
  		<div id="channel-tf1" class="img-wrapper">
  			<img id="channel-tf1-img" class="video" src="./images-et-video/tf1.jpg" onload="this.onload=null; this.src=getImages('tf1');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">TF1</span>
  		</div>
  		<div id="channel-turbo" class="img-wrapper">
  			<img id="channel-turbo-img" class="video" src="./images-et-video/turbo.jpg" onload="this.onload=null; this.src=getImages('turbo');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">TURBO</span>
  		</div>
  		<div id="channel-telefoot" class="img-wrapper">
  			<img id="channel-telefoot-img" class="video" src="./images-et-video/telefoot.jpg" onload="this.onload=null; this.src=getImages('telefoot');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">TELEFOOT</span>
  		</div>
  		<div id="channel-canadian" class="img-wrapper">
  			<img id="channel-canadian-img" class="video" src="./images-et-video/canadian.jpg" onload="this.onload=null; this.src=getImages('canadian');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">CANADIAN</span>
  		</div>
  		<div id="channel-mountain-tv" class="img-wrapper">
  			<img id="channel-mountain-tv-img" class="video" src="./images-et-video/mountain-tv.jpg" onload="this.onload=null; this.src=getImages('mountain-tv');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">MOUNTAIN TV</span>
  		</div>
  		<div id="channel-ldc-news" class="img-wrapper">
  			<img id="channel-ldc-news-img" class="video" src="./images-et-video/ldc-news.jpg" onload="this.onload=null; this.src=getImages('ldc-news');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">LDC NEWS</span>
  		</div>
  		<div id="channel-sky-sport" class="img-wrapper">
  			<img id="channel-sky-sport-img" class="video" src="./images-et-video/sky-sport.jpg" onload="this.onload=null; this.src=getImages('sky-sport');" 
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">SKY SPORT</span>
  		</div>
  		<div id="channel-lake-tv" class="img-wrapper">
  			<img id="channel-lake-tv-img" class="video" src="./images-et-video/lake-tv.jpg" onload="this.onload=null; this.src=getImages('lake-tv');"
        onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">LAKE TV</span>
  		</div>

                                            <!-- LE MODAL -->
		
		<div id="modal" class="w3-modal">
			<span class="w3-button w3-hover-red w3-xlarge w3-display-topright" onclick="modal.style.display='none'">×</span>
			<!-- Le contenu de la modal -->
  			<div id="videoid" class="w3-modal-content w3-animate-zoom">
    			<video id="video" controls loop="0">
    				<!-- La vidéo -->
		        	<source src="./images-et-video/bfm-radio.mp4" class="video">
				</video>
    		</div>
    	</div>	
	</div>
<script src="javascript/script.js"></script>
</body>
</html>
1
* {
box-sizing: border-box;
}
html, body{
padding:0;
margin:0;
width: 100%;
}
                                              /* --TOUTE LA PARTIE CSS-- */
.wrapper {
display:grid;
grid-template-columns: 0fr 0fr 0fr 0fr;
cursor: pointer;
}


#video {
display:block;
width: 100%;
position: relative;
}
.img-wrapper {
position:relative;
}

/*-- Nom des chaines par images --*/
.text {
color: white;
text-shadow: black 0.1em 0.1em 0.2em;
text-align:center;
display: block;
position:absolute;
left: 5%;
bottom: 72%;
font-size: 225%;
font-family: fantasy;
letter-spacing: 5px;

}

/*-- La modal --*/
.w3-modal {
width: 100%;
padding-top: 10%;
background-color: rgba(0,0,0,0.4);

}

.video {
width: 475.75px;
height: 251px;
}








          

                                                        /*-- LE RESPONSIVE-- */

@media all and (min-width:3412px) {
.wrapper {
grid-template-columns: repeat(6, 0fr);
}
}
@media all and (min-width:2864px) {
.wrapper {
grid-template-columns: repeat(5, 0fr);
}
}
@media all and (min-width:2393px) {
.wrapper {
grid-template-columns: repeat(6, 0fr);
}
}
@media all and (max-width:3426px) {
.wrapper {
grid-template-columns: 0fr 0fr 0fr 0fr 0fr 0fr;
}
}
@media all and (max-width:2835px) {
.wrapper {
grid-template-columns: 0fr 0fr 0fr 0fr 0fr;
}
}
@media all and (max-width:2358px) {
.wrapper {
grid-template-columns: 0fr 0fr 0fr 0fr;
}
}
@media all and (max-width:1915px) {
.wrapper {
grid-template-columns: 0fr 0fr 0fr; 
}
}
@media all and (max-width:1438px) {
.wrapper {          
grid-template-columns: 0fr 0fr; 
}
}
@media all and (max-width:964px) {
.wrapper {
grid-template-columns: 0fr; 
}
}



		//-- Fonction quand je clics sur une image sa m'ouvre une modal --//
		function onClick(element) {
	  		document.getElementById("videoid").src = element.src;
	  		document.getElementById("modal").style.display = "block";
	  		
		}


		function getImages(channel) {
			return "./images-et-video/" + channel + ".jpg" ;
		}
		//-- Fonction quand je clics juste autour de ma modal ma modal se ferme --//
		window.onclick = function(event) {
  			if (event.target == modal) {
    		modal.style.display = "none";
  			}
		}



		

		
1
jordane45 Messages postés 37253 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 mars 2023 4 551
26 févr. 2019 à 14:11
OK... et tu veux boucler sur quelles DIV ... et pourquoi faire ?
0
je voudrais boucler la classe wrapper mais je ne suis pas sur que sa fasse ce que je voudrais, je voudrais faire juste une div comme:

<div id="channel-viceland" class="img-wrapper">
  			<img id="channel-viceland-img" class="video" src="./images-et-video/viceland.jpg" onload="this.onload=null; this.src=getImages('viceland');"  
    		onclick="onClick(this)" class="w3-hover-opacity">
    		<span class="text">VICELAND</span>
  		</div>

et avoir une boucle sur cela
0
jordane45 Messages postés 37253 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 mars 2023 4 551 > Maxime
26 févr. 2019 à 14:27
Si je comprend bien...
Tu voudrais boucler sur toutes les DIV qui se trouvent dans ta div principale
<div class="wrapper">


Donc un truc du genre
function getAllDiv(){
  var ancestor = document.getElementsByClassName('wrapper');
  var descendents = ancestor[0].getElementsByTagName('div');
  
  for (var i = 0; i < descendents.length; ++i) {
    var e = descendents[i];
      console.log(e);  // e contient la DIV trouvée...
  }
}
0
Je ne voit pas ce que ça change ?
0
jordane45 Messages postés 37253 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 mars 2023 4 551 > Maxime
26 févr. 2019 à 15:42
Ben... si tu appelles cette fonction... elle affiche dans la console du navigateur les différentes div
(via la ligne de code
console.log(e);  // e contient la DIV trouvée...
)

A toi d'en faire ce que tu veux....
0
jordane45 Messages postés 37253 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 mars 2023 4 551
26 févr. 2019 à 13:56
Bonjour,

Tu n'as pas du chercher beaucoup...
par exemple :
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++){
   //do something to each div like
   divs[i].innerHTML = "something new...";
}

0
Le problème c est que j'ai des div avec des contenues différentes à chaque fois ducoup c est pour cela que je galère
0
jordane45 Messages postés 37253 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 mars 2023 4 551 > Maxime
26 févr. 2019 à 14:04
Tu veux que je sorte ma boule de divination ???
Nan par ce que bon... même avec la meilleur volonté du monde... je ne pourrais pas t'aider avec si peu d'informations !
Ta question était comment faire une boucle sur tes div ... je t'ai répondu !
Donc question résolue.

Si maintenant tu as d'autres pré-requis... il va falloir les expliquer en détail sans oublier de montrer le code que tu as déjà essayé... (sans ça .. pas daide ).

NB: Pour poster du code sur le forum, merci de le faire en utilisant LES BALISES DE CODE (et en y précisant le langage afin d'avoir la coloration syntaxique)
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
.
0
Voila désolé pour le manque de précision .
0