Ik heb een functie nodig om de waarde van het name attribuut van elk element met class =” class “te krijgen. Ik vroeg me af wat de beste manier is om dit te doen, qua prestaties.
Momenteel gebruik ik jQuery en doe het als volgt:
$("#Button").click(function() { var myElements = $(".class"); for (var i=0;i<myElements.length;i++) { alert(myElements.eq(i).attr("name")); } }); Alert is natuurlijk alleen om te laten zien wat het doet. Voor de volgende HTML:
<input type="checkbox" class="class" name="1"> <input type="checkbox" class="nope" name="2"> <input type="checkbox" class="class" name="3"> Het zou het volgende opleveren:
alert("1") alert("3") Ik vroeg me af of het gebruik van pure Javascript sneller zou zijn, of dat er een andere (betere) manier is om het te doen. Mijn excuses als deze vraag niet op deze website staat. scope, verplaats het dan naar Stackoverflow als dat het geval is.
Reacties
- Vervang alert altijd door console.log Alert blokkeert code uitvoering en dwingt je om zo vaak op ok te klikken of op enter te drukken als een resultaat wordt gevonden.
Answer
Pure JS versus jQuery
Pure JavaScript zal aanzienlijk sneller zijn, zoals je kunt zien door deze jsPerf die document.getElementByClassName versus de jQuery-selector. Hier zijn de resultaten voor Chrome 25:
-
$(".class")– 4355 bewerkingen per seconde -
getElementsByClassName("class")– 94636 bewerkingen per seconde
Zoals u kunt zien, is voor deze eenvoudige bewerking de jQuery-optie ongeveer 22 keer langzamer dan het pure-JavaScript-equivalent. U kunt gemakkelijk zien waarom dit het geval is door de jQuery-ontwikkelbron te bekijken, aangezien de jQuery “selector-functie” zo algemeen is dat hij veel moet doen controleert om te zien wat de invoer is voordat deze erop kan reageren.
Pure JS-implementatie
Ik heb de jQuery click -gebeurtenis verlaten in aangezien het lijkt alsof je al afhankelijk bent van jQuery, dus het heeft geen zin om de manier waarop je je evenementen aansluit te veranderen.
$("#Button").click(function() { var items = document.getElementsByClassName("class"); for (var i = 0; i < items.length; i++) alert(items[i].name); }); getElementsByClassName
Merk ook op dat ik getElementsByClassName heb gebruikt. Het is vrij belangrijk om de ideale selector te kiezen als u om prestaties geeft. Omdat we om alle elementen met een bepaalde klasse geven, kunnen we de andere, zoals getElementsByTagName en querySelectorAll, onmiddellijk negeren en kiezen voor de functie die is gebouwd voor het vinden van elementen van een bepaalde klasse.
jQuery-implementatie
Dit zou mijn implementatie zijn met jQuery, merk op dat ik niet de moeite nam om het jQuery-object te krijgen voor this (dwz. $(this)) omdat het gewone JavaScript-kenmerk in dit geval veel gemakkelijker is.
$("#Button").click(function() { $(".class").each(function() { alert(this.name); }); }); Reacties
- Perfect. Hoewel ik jQuery leuk vind, vermijd het als het gemakkelijk kan worden gedaan met puur Javascript. Om de een of andere reden kon ik ‘ het niet eerder laten werken, waarschijnlijk een domme syntaxisfout.
- Idem. Het duurt even om alle JS-functies te doorgronden, zorg ervoor dat u ‘ naar uw browserfouten kijkt om deze te debuggen.
- Afhankelijk van wat je wilt doen met de
names kun je jQuery s.map()om een array op te halen. - @RoToRa Ik denk dat het net zo nuttig zou zijn als
$(".class").each( function() {//stuff});in dit geval, maar bedankt!
Antwoord
In plaats van ze op te slaan in een array, kunt u de functie $.each gebruiken om er doorheen te lopen. Zoals dit:
$("#Button").click(function() { $(".class").each( function() { alert( $(this).attr("name") ); } }); Antwoord
Om dit te doen is in “pure” JavaScript, u doet zoiets als dit als u de ES6-syntaxis gebruikt:
var elements = document.getElementsByClassName("class"); elements.forEach(e => { alert(e.name) }); Voor alle browsers die ES6 niet ondersteunen (inclusief alle versies van IE):
var elements = document.getElementsByClassName("class"); elements.forEach(function(e) { alert(e.name); }); Als IE8-ondersteuning vereist is:
var elements = document.querySelectorAll(".class"); for (var i = 0; i < elements.length; i++) { alert(elements[i].name); } Wat iets sneller zal zijn in vergelijking met het gebruik van jQuery . JQuery zal echter nog steeds de kortste code zijn:
$(".class").each(e => { alert(e.name); }); Reacties
- Bedankt. Ik heb misschien te maken met 100+ elementen, aangezien dit in een commentaarsectie zal worden gebruikt. Ik ‘ zal wat benchmarking doen met beide codes en wat feedback geven als alles klaar is. Ik vroeg me af of het mogelijk zou zijn om in plaats daarvan
document.getElementsByClassName()en een for-lus te gebruiken. Ik heb het geprobeerd, maar ‘ kon het niet aan het werk krijgen.Ik heb hetzelfde gebruikt voor loop endocument.getElementsByClassName('class')[i].name
Answer
U kunt document.querySelectorAll gebruiken om de gewenste elementen op te halen:
var namedEls = document.querySelectorAll("input.class"); for (var i=0;i<namedEls.length;i+=1){ console.log(namedEls[i].name); } //=> 1, 3 Of als een liner om namen op te halen als Array:
var names = [].slice.call(document.querySelectorAll("input.class")) .map(function(el){return el.name}); //=> names is now [1,3] Reacties
- Waarom
input[class="class"]en nietinput.class? (Tenzij je specifiek elementen met meerdere klassen wilt uitsluiten.) - Geen specifieke reden, dus veranderde het antwoord. Verandert ‘ de resultaten niet.
Antwoord
parent.querySelectorAll([name="value"]); Afhankelijk van uw kennis van uw Dom, kan het superefficiënt zijn; u kunt het bovenliggende knooppunt selecteren om binnen te zoeken of gewoon naar het document gaan als u geen specifieke Dom-kennis heeft.
Als u aangepaste elementen of aangepaste naamruimte gebruikt, kan het erg krachtig zijn en zijn er geen bibliotheek-add-ons nodig. Werkt in alle moderne browsers.
Het platform groeit en kan nu geweldige dingen doen.