Obtenga el valor del atributo de nombre de cada elemento con class = “ class ”

Pure JS vs jQuery

Pure JavaScript será significativamente más rápido como puede ver en este jsPerf que presenta document.getElementByClassName frente al selector de jQuery. Aquí son los resultados para Chrome 25:

• $(".class") – 4355 operaciones por segundo
• getElementsByClassName("class") – 94636 operaciones por segundo

Como puede ver, para esta operación simple, la opción jQuery es aproximadamente 22 veces más lenta que el equivalente de JavaScript puro. Puede ver fácilmente por qué este es el caso consultando la fuente de desarrollo de jQuery , ya que la «función de selección» de jQuery es tan general que necesita hacer mucho comprueba cuál es la entrada antes de que pueda actuar sobre ella.

Implementación de JS puro

He dejado el evento jQuery click ya que parece que ya tiene una dependencia de jQuery, por lo que no tiene sentido cambiar la forma en que está conectando sus eventos.

jsFiddle

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

getElementsByClassName

También tenga en cuenta que utilicé getElementsByClassName. Es muy importante elegir el selector ideal si le importa el rendimiento. Como nos preocupan todos los elementos con una determinada clase, podemos descartar inmediatamente los demás como getElementsByTagName y querySelectorAll y optar por la función que se creó para encontrar elementos de una clase en particular.

Implementación de jQuery

Esta sería mi implementación usando jQuery, observe que no me molesté en obtener el objeto jQuery para this (es decir, $(this)) porque el atributo JavaScript simple es mucho más fácil en este caso.

jsFiddle

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

Comentarios

• Perfecto. Aunque me gusta jQuery, evítelo cuando se puede hacer fácilmente con Javascript puro. Por alguna razón, no pude ‘ hacer que funcione antes, probablemente algún error de sintaxis tonto.
• Lo mismo. Toma un tiempo entender todas las funciones de JS, asegúrate de ‘ estar mirando los errores de tu navegador para depurarlos.
• Dependiendo de lo que quieras hacer con los name s, podrías usar jQuery ‘ s .map() para obtener una matriz.
• @RoToRa Creo que sería tan útil como $(".class").each( function() {//stuff}); en este caso, ¡pero gracias!

En lugar de almacenarlos en una matriz, puede usar la función $.each para recorrerlos. Así:

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

Hacer esto es en «puro» JavaScript, haga algo como esto, si utiliza la sintaxis de ES6:

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

Para cualquier navegador que no sea compatible con ES6 (incluidas todas las versiones de IE):

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

Si se requiere compatibilidad con IE8:

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

Que será un poco más rápido en comparación con el uso de jQuery . Sin embargo, jQuery seguirá siendo el código más corto:

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

Comentarios

• Gracias. Podría estar tratando con más de 100 elementos, ya que esto se usará en una sección de comentarios. Yo ‘ haré algunas evaluaciones comparativas con ambos códigos y daré algunos comentarios cuando todo esté hecho. Me preguntaba si sería posible utilizar document.getElementsByClassName() y un bucle for en su lugar. Lo intenté, pero no pude ‘ hacer que funcionara.Usé lo mismo para loop y document.getElementsByClassName('class')[i].name

Puede usar document.querySelectorAll para recuperar los elementos deseados:

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

O como un trazador de líneas para recuperar nombres como Array:

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

Comentarios

• Por qué input[class="class"] y no input.class? (A menos que desee excluir específicamente elementos con varias clases).
• No hay ninguna razón en particular, así que cambió la respuesta. No ‘ no cambia los resultados.

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

Dependiendo de su conocimiento de su Dom, puede ser súper eficiente; puede seleccionar el nodo principal para buscar dentro o simplemente ir al documento si no tiene conocimientos específicos de Dom.

Si utiliza elementos personalizados o un espacio de nombres personalizado, puede ser muy poderoso y no requiere complementos de biblioteca. Funciona en todos los navegadores modernos.

La plataforma está creciendo y ahora puede hacer cosas increíbles.