Obtenez la valeur de lattribut name de chaque élément avec class = “ class ”

Pure JS vs jQuery

Le pur JavaScript sera nettement plus rapide comme vous pouvez le voir par ce jsPerf qui oppose document.getElementByClassName vs le sélecteur jQuery. Ici sont les résultats pour Chrome 25:

• $(".class") – 4355 opérations par seconde
• getElementsByClassName("class") – 94636 opérations par seconde

Comme vous pouvez le voir, pour cette opération simple, loption jQuery est environ 22 fois plus lente que léquivalent pur-JavaScript. Vous pouvez facilement comprendre pourquoi cest le cas en consultant la source de développement jQuery , car la « fonction de sélection » jQuery est si générale quelle doit faire beaucoup de vérifie ce quest lentrée avant de pouvoir agir dessus.

Implémentation Pure JS

Jai quitté lévénement jQuery click car il semble que vous ayez déjà une dépendance sur jQuery donc inutile de changer la façon dont vous « reliez vos événements.

jsFiddle

$("#Button").click(function() { var items = document.getElementsByClassName("class"); for (var i = 0; i < items.length; i++) alert(items[i].name); }); 

getElementsByClassName

Notez également que jai utilisé getElementsByClassName. Il est assez important de choisir le sélecteur idéal si vous vous souciez des performances. Comme nous nous soucions de tous les éléments dune certaine classe, nous pouvons immédiatement rejeter les autres comme getElementsByTagName et querySelectorAll et opter pour la fonction qui a été construite pour trouver des éléments dune classe particulière.

Implémentation jQuery

Ce serait mon implémentation en utilisant jQuery, notez que je nai pas pris la peine dobtenir lobjet jQuery pour this (cest-à-dire $(this)) car lattribut JavaScript brut est beaucoup plus simple dans ce cas.

jsFiddle

$("#Button").click(function() { $(".class").each(function() { alert(this.name); }); }); 

Commentaires

• Parfait. Bien que jaime jQuery I évitez-le quand cela peut facilement être fait avec du Javascript pur. Pour une raison quelconque, je ne pourrais pas ‘ le faire fonctionner avant, probablement une erreur de syntaxe stupide.
• Idem. Il faut du temps pour comprendre toutes les fonctions JS, assurez-vous que ‘ examinez les erreurs de votre navigateur pour le déboguer.
• Selon ce que vous souhaitez faire avec les name, vous pouvez utiliser jQuery ‘ s .map() pour obtenir un tableau.
• @RoToRa Je pense que ce serait tout aussi utile que $(".class").each( function() {//stuff}); dans ce cas, mais merci!

Au lieu de les stocker dans un tableau, vous pouvez utiliser la fonction $.each pour les parcourir en boucle. Comme ceci:

$("#Button").click(function() { $(".class").each( function() { alert( $(this).attr("name") ); } }); 

Faire ceci est en « pur » JavaScript, vous faites quelque chose comme ceci, si vous utilisez la syntaxe ES6:

var elements = document.getElementsByClassName("class"); elements.forEach(e => { alert(e.name) }); 

Pour tous les navigateurs ne prenant pas en charge ES6 (y compris toutes les versions dIE):

var elements = document.getElementsByClassName("class"); elements.forEach(function(e) { alert(e.name); }); 

Si le support IE8 est requis:

var elements = document.querySelectorAll(".class"); for (var i = 0; i < elements.length; i++) { alert(elements[i].name); } 

Ce qui sera un peu plus rapide par rapport à lutilisation de jQuery . Cependant, jQuery sera toujours le code le plus court:

$(".class").each(e => { alert(e.name); }); 

Commentaires

• Merci. Je pourrais avoir affaire à plus de 100 éléments, car cela sera utilisé dans une section de commentaires. Je ‘ Je ferai des analyses comparatives avec les deux codes et donnerai des commentaires lorsque tout sera terminé. Je me demandais sil serait possible dutiliser document.getElementsByClassName() et une boucle for à la place. Jai essayé mais je nai pas pu ‘ le faire fonctionner.Jai utilisé la même chose pour la boucle et document.getElementsByClassName('class')[i].name

Vous pouvez utiliser document.querySelectorAll pour récupérer les éléments souhaités:

var namedEls = document.querySelectorAll("input.class"); for (var i=0;i<namedEls.length;i+=1){ console.log(namedEls[i].name); } //=> 1, 3 

Ou comme une doublure pour récupérer les noms comme Array:

var names = [].slice.call(document.querySelectorAll("input.class")) .map(function(el){return el.name}); //=> names is now [1,3] 

Commentaires

• Pourquoi input[class="class"] et non input.class? (Sauf si vous souhaitez spécifiquement exclure des éléments avec plusieurs classes.)
• Aucune raison particulière, donc changé la réponse. ‘ ne modifie pas les résultats.

parent.querySelectorAll([name="value"]); 

Selon votre connaissance de votre Dom, peut être super efficace; vous pouvez sélectionner le nœud parent dans lequel rechercher ou simplement accéder au document si vous navez aucune connaissance spécifique de Dom.

Si vous utilisez des éléments personnalisés ou un espace de nom personnalisé, il peut être très puissant et ne nécessite aucun ajout de bibliothèque. Fonctionne dans tous les navigateurs modernes.

La plate-forme se développe et peut maintenant faire des choses incroyables.