Appliquer .classList.add () à toutes les divisions qui .startsWith ("exemple") - Pas de jQuery

Question

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)

javascript

-1

KAindex 13 avril 2018 à 11:08

Answer 1

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

1

Wilson 13 avril 2018 à 09:57

Answer 2

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().

0

Ben West 13 avril 2018 à 08:20

Answer 3

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 */
});

1

Fabrizio Calderan 13 avril 2018 à 08:12

Appliquer .classList.add () à toutes les divisions qui .startsWith ("exemple") - Pas de jQuery

3 réponses

Questions connexes

De nouvelles questions

javascript