Obțineți valoarea atributului de nume al fiecărui element cu class = “ class ”

Pure JS vs jQuery

JavaScript pur va fi semnificativ mai rapid, după cum puteți vedea prin acest jsPerf , care este document.getElementByClassName vs selectorul jQuery. Aici sunt rezultatele pentru Chrome 25:

• $(".class") – 4355 operațiuni pe secundă
• getElementsByClassName("class") – 94636 operațiuni pe secundă

După cum puteți vedea, pentru această operație simplă, opțiunea jQuery este de aproximativ 22 de ori mai lentă decât echivalentul pur JavaScript. Puteți vedea cu ușurință de ce este cazul verificând sursa de dezvoltare jQuery , deoarece „funcția de selecție” jQuery este atât de generală încât trebuie să facă multe verifică pentru a vedea care este intrarea înainte ca ea să poată acționa asupra sa.

Implementarea JS pură

Am părăsit evenimentul jQuery click întrucât se pare că aveți deja o dependență de jQuery, așa că nu are rost să schimbați modul în care „vă conectați evenimentele.

jsFiddle

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

getElementsByClassName

Rețineți, de asemenea, că am folosit getElementsByClassName. Este destul de important să alegeți selectorul ideal dacă vă pasă de performanță. De vreme ce ne pasă de toate elementele cu o anumită clasă, le putem respinge imediat pe celelalte precum getElementsByTagName și querySelectorAll și putem opta pentru funcția care a fost construită pentru găsirea elementelor unei anumite clase.

Implementarea jQuery

Aceasta ar fi implementarea mea folosind jQuery, observați că nu m-am deranjat să obțin obiectul jQuery pentru this (adică $(this)) deoarece atributul JavaScript simplu este mult mai ușor în acest caz.

jsFiddle

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

Comentarii

• Perfect. Deși îmi place jQuery I evitați-l atunci când se poate face cu ușurință cu Javascript pur. Din anumite motive nu l-am putut ‘ să-l fac să funcționeze înainte, probabil o eroare de sintaxă stupidă.
• Idem. Durează puțin timp pentru a vă pune capul în jurul tuturor funcțiilor JS, asigurați-vă că ‘ vă uitați la erorile browserului dvs. pentru a-l depana.
• În funcție de ceea ce doriți să faceți cu name, puteți utiliza jQuery ‘ s .map() pentru a obține o matrice.
• @RoToRa Cred că ar fi la fel de util ca $(".class").each( function() {//stuff}); în acest caz, dar mulțumesc!

În loc să le stochezi în o matrice, puteți utiliza funcția $.each pentru a trece prin ele. În acest fel:

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

Pentru a face acest lucru este în „pur” JavaScript, faceți așa ceva, dacă utilizați sintaxa ES6:

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

Pentru orice browser care nu acceptă ES6 (inclusiv toate versiunile de IE):

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

Dacă este necesară asistență IE8:

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

Care va fi puțin mai rapid în comparație cu utilizarea jQuery . Cu toate acestea, jQuery va fi în continuare cel mai scurt cod:

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

Comentarii

• Vă mulțumim. S-ar putea să am de-a face cu peste 100 de elemente, deoarece acest lucru va fi folosit într-o secțiune de comentarii. ‘ Voi face câteva analize comparative cu ambele coduri și voi oferi feedback când totul este terminat. Mă întrebam dacă va fi posibil să folosim în schimb document.getElementsByClassName() și o buclă for. Am încercat, dar nu am putut ‘ să-l pun în funcțiune.Am folosit același lucru pentru buclă și document.getElementsByClassName('class')[i].name

Puteți utiliza document.querySelectorAll pentru a prelua elementele dorite:

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

Sau ca un singur liner pentru a prelua nume ca Array:

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

Comentarii

• De ce input[class="class"] și nu input.class? (Cu excepția cazului în care doriți în mod specific să excludeți elemente cu mai multe clase.)
• Niciun motiv special, deci ați schimbat răspunsul. ‘ nu modifică rezultatele.

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

În funcție de cunoștințele dvs. despre Dom, poate fi foarte eficient; puteți selecta nodul părinte pentru a căuta în interior sau pur și simplu accesați documentul dacă nu aveți cunoștințe specifice despre Dom.

Dacă utilizați elemente personalizate sau spațiu personalizat pentru nume, acesta poate fi foarte puternic și nu necesită adăugări de bibliotecă. Funcționează în toate browserele moderne.

Platforma crește și poate face acum lucruri uimitoare.