web-dev-qa-db-fra.com

Sélectionner et ajouter une classe en javascript

Cross Platform si possible, comment puis-je sélectionner des classes en Javascript (mais pas Jquery s'il vous plaît -MooTools est très bien-) sur du code que je ne peux pas ajouter d'ID? Plus précisément, je veux ajouter la classe "cf" sur n'importe quel li ci-dessous:

HTML

<div class="itemRelated">
  <ul>
<li class="even">
<li class="odd">
<li class="even">

J'ai essayé de le tripoter mais il manque quelque chose:

Javascript

 var list, i;
list = document.getElementsByClassName("even, odd");
for (i = 0; i < list.length; ++i) {
    list[index].setAttribute('class', 'cf');
}

JSFiddle

ps. Cette question a phénoménalement possible doublons , (un autre n ) mais aucune des réponses ne le dit clairement.

javascriptdommootools
15
Yannis Dran

Utilisation de Javascript simple:

var list;
list = document.querySelectorAll("li.even, li.odd");
for (var i = 0; i < list.length; ++i) {
   list[i].classList.add('cf');
}

Démo

Pour les navigateurs plus anciens, vous pouvez utiliser ceci: 

var list = [];
var elements = document.getElementsByTagName('li');
for (var i = 0; i < elements.length; ++i) {
    if (elements[i].className == "even" || elements[i].className == "odd") {
        list.Push(elements[i]);
    };
}
for (var i = 0; i < list.length; ++i) {
    if (list[i].className.split(' ').indexOf('cf') < 0) {
        list[i].className = list[i].className + ' cf';
    }
}

Démo

Utilisation de Mootools:

$$('.itemRelated li').addClass('cf');

Démo

ou si vous souhaitez cibler spécifiquement par classe: 

$$('li.even, li.odd').addClass('cf');

Démo

16
Sergio

Utilisation de nouveaux objets et méthodes de navigateur.

Pure JS: Détails: à l'ancienne, en déclarant des choses lors du lancement que d'itérer dans une grande boucle sur des éléments avec l'index 'i', pas de grande science ici. Une chose utilise classList objet qui est un moyen intelligent d'ajouter/supprimer/vérifier des classes à l'intérieur de tableaux.

var elements = document.querySelectorAll('.even','.odd'),
    i, length;

for(i = 0, length = elements.length; i < length; i++) {
    elements[i].classList.add('cf');
}

Pure JS - 2: Détails: document.querySelectorAll renvoie un objet de type tableau accessible via des index mais sans méthode Array. L'appel de slice depuis Array.prototype renvoie instantanément un tableau d'éléments récupérés (probablement la conversion NodeList -> Array la plus rapide). Vous pouvez ensuite utiliser une méthode .forEach Sur un nouvel objet tableau créé.

Array.prototype.slice.call(document.querySelectorAll('.even','.odd'))
 .forEach(function(element) {
    element.classList.add('cf');
});

Pure JS - 3: Détails: c'est assez similaire à v2, [].map Est à peu près la même chose que Array.prototype.map Sauf que vous déclarez ici un tableau vide pour appeler la méthode map . C'est plus court mais plus (ok peu plus) de mémoire. La méthode .map Exécute une fonction sur chaque élément du tableau et renvoie un nouveau tableau (l'ajout de la fonction return in inside entraînerait le remplissage des valeurs renvoyées, ici elle n'est pas utilisée).

[].map.call(document.querySelectorAll('.even','.odd'), function(element) {
    element.classList.add('cf');
});

Choisissez-en un et utilisez;)

3
veritas

Comme d'autres le mentionnent pour sélectionner les éléments, vous devez utiliser la méthode .querySelectorAll(). DOM fournit également classList API qui prend en charge l'ajout, la suppression et le basculement de classes:

var list, i;
list = document.querySelectorAll('.even, .foo');
for (i = 0; i < list.length; i++) {
    list[i].classList.add('cf');
}

Comme toujours IE9 et ci-dessous ne prennent pas en charge l'API, si vous souhaitez prendre en charge ces navigateurs, vous pouvez utiliser un shim, MDN a n .

2
undefined

querySelectorAll est pris en charge dans IE8, getElementsByClassName ne l'est pas, qui n'a pas non plus deux classes en même temps. Aucun d'entre eux ne travaille dans iE7, mais peu importe.

Il suffit ensuite d'itérer et d'ajouter à la propriété className.

var list = document.querySelectorAll(".even, .odd");
for (var i = list.length; i--;) {
    list[i].className = list[i].className + ' cf';
}

[~ # ~] violon [~ # ~]

2
adeneo

Je sais que c'est ancien, mais y a-t-il une raison de ne pas le faire simplement (à part les problèmes potentiels de support du navigateur)?

document.querySelectorAll("li.even, li.odd").forEach((el) => {
    el.classList.add('cf');
});

Prise en charge: https://caniuse.com/#feat=es5

1
MuffinTheMan