Ottieni il valore dellattributo name di ogni elemento con class = “ class ”

Pure JS vs jQuery

Pure JavaScript sarà significativamente più veloce, come puoi vedere da questo jsPerf che corrisponde a document.getElementByClassName rispetto al selettore jQuery. Qui sono i risultati per Chrome 25:

• $(".class") – 4355 operazioni al secondo
• getElementsByClassName("class") – 94636 operazioni al secondo

Come puoi vedere, per questa semplice operazione lopzione jQuery è circa 22 volte più lenta dellequivalente JavaScript puro. Puoi facilmente capire perché questo è il caso controllando il sorgente di sviluppo jQuery , poiché la “funzione selettore” jQuery è così generale che deve fare molte controlla per vedere qual è linput prima che possa agire su di esso.

Implementazione JS puro

Ho lasciato levento jQuery click in quanto sembra che tu abbia già una dipendenza da jQuery, quindi non ha senso cambiare il modo in cui “stai collegando i tuoi eventi.

jsFiddle

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

getElementsByClassName

Tieni inoltre presente che ho utilizzato getElementsByClassName. È piuttosto importante scegliere il selettore ideale se ti interessano le prestazioni. Poiché abbiamo a cuore tutti gli elementi con una certa classe, possiamo immediatamente ignorare gli altri come getElementsByTagName e querySelectorAll e optare per la funzione che è stata creata per trovare elementi di una particolare classe.

implementazione jQuery

Questa sarebbe la mia implementazione utilizzando jQuery, nota che non mi sono preoccupato di ottenere loggetto jQuery per this (ad es. $(this)) perché lattributo JavaScript semplice è molto più semplice in questo caso.

jsFiddle

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

Commenti

• Perfetto. Anche se mi piace jQuery I evitalo quando può essere fatto facilmente con il puro Javascript. Per qualche motivo non potevo ' farlo funzionare prima, probabilmente qualche stupido errore di sintassi.
• Idem. Ci vuole un po per capire tutte le funzioni JS, assicurati di ' di esaminare gli errori del tuo browser per eseguirne il debug.
• A seconda di cosa vuoi fare con i name puoi utilizzare jQuery ' s .map() per ottenere un array.
• @RoToRa Penso che sarebbe utile tanto quanto $(".class").each( function() {//stuff}); in questo caso, ma grazie!

Invece di archiviarli in un array, puoi utilizzare la funzione $.each per scorrerli. In questo modo:

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

Per farlo è in “pure” JavaScript, fai qualcosa di simile, se usi la sintassi ES6:

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

Per tutti i browser che non supportano ES6 (comprese tutte le versioni di IE):

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

Se è richiesto il supporto di IE8:

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

Che sarà un po più veloce rispetto allutilizzo di jQuery . Tuttavia, jQuery sarà ancora il codice più breve:

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

Commenti

• Grazie. Potrei avere a che fare con più di 100 elementi, poiché verranno utilizzati nella sezione dei commenti. ' farò alcuni benchmark con entrambi i codici e fornirò un feedback quando tutto sarà finito. Mi chiedevo se fosse possibile utilizzare document.getElementsByClassName() e un ciclo for. Ho provato ma ' non riesco a farlo funzionare.Ho usato lo stesso ciclo for e document.getElementsByClassName('class')[i].name

Puoi utilizzare document.querySelectorAll per recuperare gli elementi desiderati:

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

O come una riga per recuperare i nomi come Array:

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

Commenti

• Perché input[class="class"] e non input.class? (A meno che tu non voglia escludere specificamente elementi con più classi.)
• Nessun motivo particolare, quindi è cambiata la risposta. ' t modifica i risultati.

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

A seconda della tua conoscenza del tuo Dom, può essere super efficiente; puoi selezionare il nodo genitore in cui cercare o semplicemente andare al documento se non hai una conoscenza specifica di Dom.

Se si utilizzano elementi personalizzati o spazio dei nomi personalizzato, può essere molto potente e non richiede laggiunta di librerie. Funziona con tutti i browser moderni.

La piattaforma sta crescendo e ora può fare cose sorprendenti.