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.

javascript html css
0
KAindex 16 avril 2018 à 14:30

5 réponses

Meilleure réponse

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>
1
Chirag Ravindra 16 avril 2018 à 11:45

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>
0
zeropublix 16 avril 2018 à 12:39

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");
 });
1
Deepanshu Sukhija 16 avril 2018 à 11:37

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.

1
Takit Isy 16 avril 2018 à 12:29

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');
0
PPNC 16 avril 2018 à 11:44

Questions connexes

18 jQuery: Vérifiez si div avec un certain nom de classe existe
3 Impossible d'afficher la chaîne HTML
3 Utilisez des images comme arrière-plan et appliquez-vous aux parents div de la même classe
3 Modifier l'élément: après le contenu en fonction du texte Contenu de l'élément séparé à l'aide de Vanilla JavaScript

De nouvelles questions

6 Comment combiner deux données en une seule en JavaScript ?
2 Itérer à travers le tableau JSON en le mettant dans un nouveau tableau
2 Cycle d'une classe à travers les enfants d'un div
2 comment réinitialiser settimeout lorsque vous cliquez à nouveau sur set
2 JavaScript boucle à travers le tableau de profondeur dans un objet imbriqué
2 Comment passer l'état à jsx, le rendre et le mettre à jour lorsque l'état change ?
3 Comment mapper une nouvelle propriété à une propriété existante dans le tableau d'objets JavaScript
2 Image de référencement dans le dossier des ressources
3 Comment afficher seulement 30 caractères maximum dans Vue.js ?
3 trouver la valeur (et la clé) d'un objet dans un tableau (JS)
Toutes les questions sur javascript >

javascript

Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.

Plus à propos javascript...