Comment faire une boucle

Maxime -
Maxime - 26 févr. 2019 à 17:02

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

Afficher la suite

3 réponses

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>

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";
  			}
		}

jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830

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

jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830 > 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...
  }
}

Maxime

Je ne voit pas ce que ça change ?
0
jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830 > 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 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830
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
1. 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
  1. jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830 > 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
2. Maxime
  
  Voila désolé pour le manque de précision .
  
  0

Comment faire une boucle

3 réponses

Discussions similaires

Newsletters