Comment faire une boucle

Maxime -  
 Maxime -
Bonjour, je cherche à faire une boucle sur mes div comment puis-je faire merci.

3 réponses

Réponse 1 / 3
Maxime
  
<!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
Réponse 2 / 3
Maxime
  
* {
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
OK... et tu veux boucler sur quelles DIV ... et pourquoi faire ?
0
Maxime
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > Maxime
 
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
Maxime
 
Je ne voit pas ce que ça change ?
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > Maxime
 
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
Réponse 3 / 3
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
Maxime
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > Maxime
 
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
Maxime
 
Voila désolé pour le manque de précision .
0

Discussions similaires

Mon pc s'allume et s'éteint en boucle
Jack -
Daniel -

16 réponses
Mon ordinateur s'allume et s'eteint en boucle
mhmd_elmrni -
BiGaMeRz10 -

10 réponses
tele s'eteind et s'allume en boucle
avion386 -
txiki -

4 réponses
problème tv décodeur orange
N.Look -
Mylord -

4 réponses
Redmi redémarre en boucle - Fastboost impossible
Jaaane -
crooner76 -

1 réponse