Jeg har brug for en funktion for at få værdien af navneattributten for hvert element med class =” class “. Jeg spekulerede på, hvad der er den bedste måde at gøre dette på, præstationsmæssigt.

I øjeblikket bruger jeg jQuery og gør det sådan: 

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

Alert er selvfølgelig bare for at vise, hvad det gør. 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 udstede: 

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

Jeg spekulerede på, om det ville være hurtigere at bruge rent Javascript, eller om der er nogen anden (bedre) måde at gøre det på. Jeg undskylder, hvis dette spørgsmål ikke findes på dette websteds “s rækkevidde, flyt det til Stackoverflow, hvis det er tilfældet.

Kommentarer

  • Udskift altid alarmen med console.log Alert blokerer kode udførelse og tvinger dig til at klikke på ok eller trykke på enter så mange gange som et resultat er fundet.

Svar

Ren JS vs jQuery

Ren JavaScript vil være betydeligt hurtigere, som du kan se ved denne jsPerf , som sætter document.getElementByClassName vs jQuery-vælgeren. Her er resultaterne for Chrome 25:

  • $(".class") – 4355 handlinger pr. sekund
  • getElementsByClassName("class") – 94636 operationer pr. sekund

Som du kan se, for denne enkle handling er jQuery-indstillingen ca. 22 gange langsommere end ren JavaScript-ækvivalent. Du kan let se, hvorfor dette er tilfældet ved at tjekke jQuery-udviklingskilden , da jQuery “vælgerfunktion” er så generel, at den skal gøre en masse kontrollerer for at se, hvad input er, før det kan reagere på det.

Ren JS implementering

Jeg har forladt jQuery click begivenheden da det ser ud til, at du allerede har en afhængighed af jQuery, så ingen mening ændrer den måde, du tilslutter dine begivenheder på.

jsFiddle 

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

getElementsByClassName

Bemærk også, at jeg brugte getElementsByClassName. Det er ret vigtigt at vælge den ideelle vælger, hvis du er interesseret i ydeevne. Da vi bryr os om alle elementer med en bestemt klasse, kan vi straks afvise de andre som getElementsByTagName og querySelectorAll og vælge den funktion, der blev bygget for at finde elementer i en bestemt klasse.

jQuery-implementering

Dette ville være min implementering ved hjælp af jQuery, bemærk at jeg ikke gider at få jQuery-objektet til this (dvs. $(this)) fordi den almindelige JavaScript-attribut er meget lettere i dette tilfælde.

jsFiddle 

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

Kommentarer

  • Perfekt. Selvom jeg kan lide jQuery I undgå det, når det let kan gøres med rent Javascript. Af en eller anden grund kunne jeg ikke ' ikke få det til at fungere før, sandsynligvis en stum syntaksfejl.
  • Ditto. Det tager et stykke tid at få hovedet rundt om alle JS-funktionerne. Sørg for, at du ' ser på dine browserfejl for at debugge det.
  • Afhængigt af hvad du vil gøre med name s, kan du bruge jQuery ' s .map() for at få en matrix.
  • @RoToRa Jeg tror, det ville være lige så nyttigt som $(".class").each( function() {//stuff}); i dette tilfælde, men tak!

Svar

I stedet for at gemme dem i et array, kan du bruge $.each -funktionen til at løbe igennem dem. Sådan: 

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

Svar

At gøre dette er i “ren” JavaScript, du gør noget som dette, hvis du bruger ES6-syntaks: 

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

For alle browsere, der ikke understøtter ES6 (inklusive alle versioner af IE): 

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

Hvis IE8-understøttelse er påkrævet: 

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

Hvilket vil være en smule hurtigere sammenlignet med jQuery . Dog vil jQuery stadig være den korteste kode: 

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

Kommentarer

  • Tak. Jeg har måske at gøre med 100+ elementer, da dette vil blive brugt i en kommentarsektion. Jeg ' Jeg foretager nogle benchmarking med begge koder og giver feedback, når alt er gjort. Jeg spekulerede på, om det ville være muligt at bruge document.getElementsByClassName() og en for-loop i stedet. Jeg prøvede, men kunne ikke ' ikke få det til at fungere.Jeg brugte det samme til loop og document.getElementsByClassName('class')[i].name

Svar

Du kan bruge document.querySelectorAll til at hente de ønskede elementer: 

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 at hente navne 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? (Medmindre du specifikt vil ekskludere elementer med flere klasser.)
  • Ingen særlig grund, så ændrede svaret. Ændrer ' ikke resultaterne.

Svar 

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

Afhængigt af din viden om din Dom kan være super effektiv; Du kan vælge den overordnede node, der skal søges i, eller bare gå til dokumentet, hvis du ikke har nogen specifik Dom-viden.

Hvis du bruger brugerdefinerede elementer eller brugerdefineret navneplads, kan det være meget effektivt og kræver ingen tilføjelser til biblioteket. Fungerer i alle moderne browsere.

Platformen vokser og kan nu gøre fantastiske ting.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *