Jeg trenger en funksjon for å få verdien av navnet attributtet til hvert element med class =» class «. Jeg lurte på hva som er den beste måten å gjøre dette på, ytelsesmessig.

For tiden bruker jeg jQuery og gjør det slik: 

$("#Button").click(function() { var myElements = $(".class"); for (var i=0;i<myElements.length;i++) { alert(myElements.eq(i).attr("name")); } });

Alert er bare for å vise hva den gjør, selvfølgelig. For følgende HTML: 

<input type="checkbox" class="class" name="1"> <input type="checkbox" class="nope" name="2"> <input type="checkbox" class="class" name="3">

Det ville utgitt: 

alert("1") alert("3")

Jeg lurte på om bruk av rent Javascript ville være raskere, eller om det er noen annen (bedre) måte å gjøre det på. Jeg beklager hvis dette spørsmålet ikke er på dette nettstedet. omfang, vær så snill å flytte den til Stackoverflow hvis det er tilfelle.

Kommentarer

  • Erstatt alltid varselet med console.log Alert blokkerer kode utførelse og tvinger deg til å klikke ok eller trykke på enter så mange ganger et resultat blir funnet.

Svar

Pure JS vs jQuery

Pure JavaScript vil bli betydelig raskere som du kan se ved å denne jsPerf som setter document.getElementByClassName mot jQuery-velgeren. Her er resultatene for Chrome 25:

  • $(".class") – 4355 operasjoner per sekund
  • getElementsByClassName("class") – 94636 operasjoner per sekund

Som du kan se, for denne enkle operasjonen er jQuery-alternativet omtrent 22 ganger langsommere enn den rene JavaScript-ekvivalenten. Du kan enkelt se hvorfor dette er tilfellet ved å sjekke jQuery-utviklingskilden , siden jQuery «selector-funksjonen» er så generell at den trenger å gjøre mye av sjekker for å se hva inngangen er før den kan handle på den.

Ren JS-implementering

Jeg har forlatt jQuery click hendelsen da det ser ut til at du allerede har en avhengighet av jQuery, så det er ikke noe poeng å endre måten du kobler til hendelsene dine.

jsFiddle 

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

getElementsByClassName

Legg også merke til at jeg brukte getElementsByClassName. Det er ganske viktig å velge den ideelle velgeren hvis du bryr deg om ytelse. Siden vi bryr oss om alle elementene med en bestemt klasse, kan vi umiddelbart avvise de andre som getElementsByTagName og querySelectorAll og velge funksjonen som ble bygget for å finne elementer i en bestemt klasse.

jQuery implementering

Dette ville være implementeringen min ved hjelp av jQuery, legg merke til at jeg ikke gadd å få jQuery-objektet til this (dvs. $(this)) fordi det vanlige JavaScript-attributtet er mye lettere i dette tilfellet.

jsFiddle 

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

Kommentarer

  • Perfekt. Selv om jeg liker jQuery I unngå det når det enkelt kan gjøres med rent Javascript. Av en eller annen grunn kunne jeg ikke ' t få det til å fungere før, sannsynligvis noen dumme syntaksfeil.
  • Ditto. Det tar litt tid å få hodet rundt alle JS-funksjonene, sørg for at du ' ser på nettleserfeilene dine for å feilsøke det.
  • Avhengig av hva du vil gjøre med name s, kan du bruke jQuery ' s .map() for å få en matrise.
  • @RoToRa Jeg tror det vil være like nyttig som $(".class").each( function() {//stuff}); i dette tilfellet, men takk!

Svar

I stedet for å lagre dem i en matrise, kan du bruke $.each -funksjonen for å gå gjennom dem. Slik: 

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

Svar

Å gjøre dette er i «ren» JavaScript, du gjør noe slikt hvis du bruker ES6-syntaks: 

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

For nettlesere som ikke støtter ES6 (inkludert alle versjoner av IE): 

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

Hvis IE8-støtte kreves: 

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

Som vil være litt raskere sammenlignet med bruk av jQuery . Imidlertid vil jQuery fremdeles være den korteste koden: 

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

Kommentarer

  • Takk. Jeg har kanskje med 100+ elementer å gjøre, siden dette vil bli brukt i en kommentarseksjon. Jeg ' Jeg gjør noen benchmarking med begge kodene og gir noen tilbakemeldinger når alt er gjort. Jeg lurte på om det ville være mulig å bruke document.getElementsByClassName() og en for loop i stedet. Jeg prøvde, men kunne ikke ' ikke få det til å fungere.Jeg brukte det samme for loop og document.getElementsByClassName('class')[i].name

Svar

Du kan bruke document.querySelectorAll for å hente de ønskede elementene: 

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

Eller som en liner for å hente navn som Array: 

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

Kommentarer

  • Hvorfor input[class="class"] og ikke input.class? (Med mindre du spesifikt vil ekskludere elementer med flere klasser.)
  • Ingen spesiell grunn, så endret svaret. Endrer ikke ' resultatene.

Svar 

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

Avhengig av din kunnskap om din Dom, kan det være supereffektivt; Du kan velge foreldrenoden for å søke i eller bare gå til dokumentet hvis du ikke har noen spesifikk Dom-kunnskap.

Hvis du bruker egendefinerte elementer eller egendefinert navneplass, kan det være veldig kraftig og krever ingen bibliotekstillegg. Fungerer i alle moderne nettlesere.

Plattformen vokser og kan nå gjøre fantastiske ting.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *