Pour évaluer ma question, j'ai besoin d'un moyen en JavaScript Vanilla pour ajouter une classe à une balise img, qui s'exécute en fonction de la classe de div que cette balise img est enfant à - J'ai besoin pour ajouter un class à un img si son parentNode contient " boîte ".
Ceci est un exemple simplifié de mon code:
<div class="example first">
<h2><a>sample text</a></h2>
<img src="./img/sample.png" />
<p>sample text</p>
</div>
<div class="example box">
<h2><a>sample text</a></h2>
<img src="./img/sample.png" />
<p>sample text</p>
</div>
<div class="example box">
<h2><a>sample text</a></h2>
<img src="./img/sample.png" />
<p>sample text</p>
</div>
var div = document.getElementsByTagName("div");
var img = document.getElementsByTagName("img");
var i;
for (i = 0; i < div.length; i++){
if (div[i].classList.value.indexOf("example") > -1){
div[i].classList.add("style-1");
if (div[i].classList.value.indexOf("box") > -1){
div[i].classList.add("style-2");
div[i].classList.remove("style-1");
for (i = 0; i < img.length; i++){
img[i].classList.add("img-class");
}
}
}
}
Ce code fournit en quelque sorte le résultat souhaité, cependant, il applique img-class aux classList de TOUTES les img balises, même si le div parent ne contient pas box dans leur { {X4}}; par exemple. img-class est également appliqué au div avec la classe example first.
Il supprime également les classes ajoutées à la classList des divs suivant la première div qui contient example box dans leur classList.
EXEMPLE:
<div class="example first style-1">
<h2><a>sample text</a></h2>
<img class="img-class" src="./img/sample.png" /> /* UNWANTED CLASS APPLIED */
<p>sample text</p>
</div>
<div class="example box style-2">
<h2><a>sample text</a></h2>
<img class="img-class" src="./img/sample.png" />
<p>sample text</p>
</div>
<div class="example box"> /* NO CLASS APPLIED WHEN SHOULD BE */
<h2><a>sample text</a></h2>
<img class="img-class" src="./img/sample.png" />
<p>sample text</p>
</div>
Alors que le résultat souhaité est:
<div class="example first style-1">
<h2><a>sample text</a></h2>
<img src="./img/sample.png" /> /*NO CLASS APPLIED*/
<p>sample text</p>
</div>
<div class="example box style-2">
<h2><a>sample text</a></h2>
<img class="img-class" src="./img/sample.png" />
<p>sample text</p>
</div>
<div class="example box style-2"> /* STYLE APPLIED */
<h2><a>sample text</a></h2>
<img class="img-class" src="./img/sample.png" />
<p>sample text</p>
</div>
J'ai également essayé le JavaScript suivant pour ne pas l'emporter:
var parentNodeImg = img.parentNode;
if (parentNodeImg.classList.value.indexOf("box") > -1){
img.classList.add("img-class");
}
Merci d'avance! Je sais qu'il y en a un peu ici, j'ai essayé de l'affiner autant que possible.
5 réponses
Vous pouvez utiliser document.querySelectorAll pour interroger uniquement les img balises qui sont dans un div avec la classe box et ajouter la classe uniquement à ces éléments
var selectedImgTags = document.querySelectorAll('.box > img');
selectedImgTags.forEach(function(el) {
el.className += ' magic';
})/* Adding this to illustrate the difference visually in the output */
.magic {
border: 1px solid red;
}<div class="example first">
<h2><a>sample text</a></h2>
<img src="./img/sample.png" />
<p>sample text</p>
</div>
<div class="example box">
<h2><a>sample text</a></h2>
<img src="./img/sample.png" />
<p>sample text</p>
</div>
<div class="example box">
<h2><a>sample text</a></h2>
<img src="./img/sample.png" />
<p>sample text</p>
</div>Vous devez utiliser classList au lieu des className.split(' ') couramment utilisés
Ci-dessous, vous pouvez voir un exemple de travail en action:
var images = document.querySelectorAll('img');
images.forEach(img => {
var clss = img.parentNode.classList;
clss.forEach(cls => {
if (cls == 'box') {
img.classList.add('img-class');
}
});
});.img-class {
border: 3px solid red;
}<div class="example first style-1">
<h2><a>sample text</a></h2>
<img src="http://via.placeholder.com/50x50" />
<p>sample text</p>
</div>
<div class="example box style-2">
<h2><a>sample text</a></h2>
<img src="http://via.placeholder.com/50x50" />
<p>sample text</p>
</div>
<div class="example box">
<h2><a>sample text</a></h2>
<img src="http://via.placeholder.com/50x50" />
<p>sample text</p>
</div>Vous pouvez le faire en appliquant le code suivant en javascript
var boxes = document.querySelectorAll('.box');
boxes.map(function(box){
var img = box.querySelector("img");
img.classList.add("img-class");
});
Après avoir joué un peu avec votre code,
Voici un extrait de travail:
(J'ai ajouté CSS pour la visibilité)
var div = document.getElementsByTagName("div");
var i, j, img;
for (i = 0; i < div.length; i++) {
if (div[i].classList.contains("example")) {
div[i].classList.add("style-1");
if (div[i].classList.contains('box')) {
div[i].classList.add("style-2");
div[i].classList.remove("style-1");
img = div[i].getElementsByTagName("img");
for (j = 0; j < img.length; j++) {
img[j].classList.add("img-class");
}
}
}
}.style-1 {
background: #aaa;
}
.style-2 {
border: 1px solid black;
}
.img-class{
background: red;
}<div class="example first">
<h2><a>sample text</a></h2>
<img src="./img/sample.png" />
<p>sample text</p>
</div>
<div class="example box">
<h2><a>sample text</a></h2>
<img src="./img/sample.png" />
<p>sample text</p>
</div>
<div class="example box">
<h2><a>sample text</a></h2>
<img src="./img/sample.png" />
<p>sample text</p>
</div>J'ai essayé de ne pas trop modifier votre code mais j'ai utilisé contains() pour vérifier si une classe est présente.
Notez que vous utilisiez la variable i dans la deuxième boucle, je l'ai remplacée en utilisant j car elle a provoqué quelques dysfonctionnements.
J'espère que cela aide.
Au lieu de parcourir chaque div, vous ne pouvez parcourir que les div avec la classe que vous souhaitez:
let divs = document.getElementsByClassName('box');
for (let i = 0; i < divs.length; i++) {
if (divs[i].tagName === 'DIV') {/* Get your imgs and add class to them */}
}
Vous pouvez obtenir tous les enfants img d'une division donnée avec:
let imgs = divElement.getElementsByTagName('img');