Obtenha o valor do atributo name de cada elemento com class = “ class ”

JS puro vs jQuery

JavaScript puro será significativamente mais rápido, como você pode ver este jsPerf que apresenta document.getElementByClassName vs o seletor jQuery. Aqui são os resultados para o Chrome 25:

• $(".class") – 4355 operações por segundo
• getElementsByClassName("class") – 94636 operações por segundo

Como você pode ver, para esta operação simples, a opção jQuery é aproximadamente 22 vezes mais lenta do que o equivalente em JavaScript puro. Você pode ver facilmente por que esse é o caso verificando a fonte de desenvolvimento do jQuery , uma vez que a “função seletor” do jQuery é tão geral que precisa fazer muito verifica o que é a entrada antes de agir sobre ela.

Implementação de JS puro

Eu saí do evento jQuery click in, visto que parece que você já tem uma dependência do jQuery, então não adianta mudar a maneira como você está conectando seus eventos.

jsFiddle

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

getElementsByClassName

Observe também que usei getElementsByClassName. É muito importante escolher o seletor ideal se você se preocupa com o desempenho. Como nos preocupamos com todos os elementos de uma determinada classe, podemos descartar imediatamente os outros como getElementsByTagName e querySelectorAll e optar pela função que foi construída para encontrar elementos de uma classe específica.

Implementação de jQuery

Esta seria minha implementação usando jQuery, observe que não me incomodei em obter o objeto jQuery para this (ou seja, $(this)) porque o atributo JavaScript simples é muito mais fácil neste caso.

jsFiddle

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

Comentários

• Perfeito. Embora eu goste de jQuery I evite quando isso pode ser feito facilmente com Javascript puro. Por algum motivo, eu não consegui ‘ fazer funcionar antes, provavelmente algum erro de sintaxe idiota.
• Idem. Demora um pouco para se familiarizar com todas as funções JS, certifique-se de ‘ ver os erros do navegador para depurá-los.
• Dependendo do que você deseja fazer com os name s, você pode usar jQuery ‘ s .map() para obter uma matriz.
• @RoToRa Acho que seria tão útil quanto $(".class").each( function() {//stuff}); neste caso, mas obrigado!

Em vez de armazená-los em uma matriz, você pode usar a função $.each para percorrê-los. Assim:

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

Para fazer isso é “puro” JavaScript, você faz algo assim, se estiver usando a sintaxe ES6:

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

Para qualquer navegador que não suporte ES6 (incluindo todas as versões do IE):

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

Se o suporte do IE8 for necessário:

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

O que será um pouco mais rápido em comparação com o uso do jQuery . No entanto, jQuery ainda será o código mais curto:

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

Comentários

• Obrigado. Posso estar lidando com mais de 100 elementos, já que isso será usado em uma seção de comentários. Eu ‘ farei alguns benchmarking com ambos os códigos e darei algum feedback quando tudo estiver pronto. Eu queria saber se seria possível usar document.getElementsByClassName() e um loop for. Tentei, mas não ‘ consegui fazer funcionar.Usei o mesmo for loop e document.getElementsByClassName('class')[i].name

Você pode usar document.querySelectorAll para recuperar os elementos desejados:

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

Ou como uma linha para recuperar nomes como Array:

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

Comentários

• Por que input[class="class"] e não input.class? (A menos que você deseje especificamente excluir elementos com várias classes.)
• Nenhum motivo particular, então mude a resposta. Não ‘ não altera os resultados.

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

Dependendo do seu conhecimento sobre o seu Dom, pode ser supereficiente; você pode selecionar o nó pai para pesquisar ou apenas ir ao documento se não tiver nenhum conhecimento Dom específico.

Se estiver usando elementos personalizados ou espaço de nome personalizado, pode ser muito poderoso e não requer complementos de biblioteca. Funciona em todos os navegadores modernos.

A plataforma está crescendo e agora pode fazer coisas incríveis.