Je souhaite effectuer les opérations suivantes, mais je ne sais pas comment utiliser correctement le contenu ciblé dans .startsWith.
Voici ce que j'ai:
var divClass = document.querySelector('div').getAttribute('class');
if (divClass.startsWith('example')){
divClass.classList.add('width', 'height');
}
Comme indiqué ci-dessus, j'ai essayé d'utiliser classList.add() sur divClass sans prévaloir. Je crois que cette stratégie est en effet incorrecte, cependant, je crois que quelque chose comme ce qui suit est plus proche ...
var divClass = document.querySelector('div').getAttribute('class');
if (divClass.startsWith("example")){
example.classList.add('width', 'height');
}
... Bien que j'aie du mal à cibler directement exemple et à utiliser .classList.add() pour appliquer des classes à toutes les divs avec la classe exemple .
Si quelqu'un a une solution à cela, ce serait grandement apprécié et je vous en remercie d'avance!
FYI - Toutes les solutions doivent être en Vanilla JavaScript (No jQuery)
3 réponses
Vous pouvez utiliser ce sélecteur getElementsByClassName
var list = document.getElementsByClassName("example");
for(var i=0;i<list.length;i++){
list[i].classList.add("mystyle");
}
Pour rechercher des classes similaires, cette solution fonctionne
var x = document.querySelectorAll('div');
var i;
for (i = 0; i < x.length; i++) {
if(x[i].classList.value.indexOf('example') > -1){
x[i].classList.add("mystyle");
}
}
querySelector n'obtient qu'un seul élément, vous ne sélectionnez donc que le premier div sur la page et travaillez avec cela. Pour obtenir une liste d'éléments, utilisez querySelectorAll.
Dans jQuery, vous pouvez appeler $('div').addClass('example') et vous n'avez pas à vous soucier de savoir s'il y en a un div ou beaucoup, car jQuery gère la boucle pour chacun d'eux. Sans jQuery, vous devez faire l'itération vous-même:
var divs = document.querySelectorAll('div');
for ( var i = 0; i < divs.length; i++ ) {
divs[ i ].classList.add('example')
}
Ou
document.querySelectorAll('div').forEach(div => div.classList.add('example'))
document.querySelectorAll( selector ) est très similaire à $( selector ), mais document.querySelector( selector ) ressemble plus à $( selector ).first().
Récupérez tous les div avec le nom de classe commençant par example et parcourez la collection de nœuds que vous avez trouvée
let divClass = document.querySelectorAll('div[class^="example"]');
[].forEach.call(divClass, function(div) {
/* do something on div */
});