Získejte hodnotu atributu name každého prvku pomocí class = “ class ”

Čistý JS vs jQuery

Čistý JavaScript bude výrazně rychlejší, jak vidíte tento jsPerf , který obsahuje document.getElementByClassName vs selektor jQuery. Tady jsou výsledky pro Chrome 25:

• $(".class") – 4355 operací za sekundu
• getElementsByClassName("class") – 94636 operace za sekundu

Jak vidíte, pro tuto jednoduchou operaci je volba jQuery přibližně 22krát pomalejší než ekvivalent čistého JavaScriptu. Snadno zjistíte, proč tomu tak je, když si prohlédnete zdroj vývoje jQuery , protože jQuery „selektorová funkce“ je tak obecná, že musí dělat hodně zkontroluje, co je vstup, než na něj může reagovat.

Čistá implementace JS

Opustil jsem událost jQuery click vzhledem k tomu, že to vypadá, že již máte závislost na jQuery, takže nemá smysl měnit způsob, jakým své události znovu připojujete.

jsFiddle

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

getElementsByClassName

Upozorňujeme, že jsem použil getElementsByClassName. Je docela důležité zvolit ideální volič, pokud vám záleží na výkonu. Jelikož nám záleží na všech prvcích určité třídy, můžeme okamžitě zavrhnout ostatní jako getElementsByTagName a querySelectorAll a zvolit funkci, která byla vytvořena. pro hledání prvků konkrétní třídy.

Implementace jQuery

Toto by byla moje implementace pomocí jQuery, všimněte si, že jsem se neobtěžoval dostat objekt jQuery pro this (tj. $(this)), protože jednoduchý atribut JavaScriptu je v tomto případě mnohem jednodušší.

jsFiddle

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

Komentáře

• Perfektní. I když mám rád jQuery I vyhněte se tomu, když to lze snadno provést pomocí čistého Javascriptu. Z nějakého důvodu jsem nemohl ' to fungovat dříve, pravděpodobně nějaká hloupá chyba syntaxe.
• Ditto. Chvíli trvá, než se zorientujete ve všech funkcích JS. ' znovu prohlédněte chyby prohlížeče a odlaďte je.
• Podle toho, co chcete s name s dělat, můžete použít jQuery ' s .map() získat pole.
• @RoToRa Myslím, že by to bylo stejně užitečné jako $(".class").each( function() {//stuff}); v tomto případě, ale děkuji!

Místo jejich uložení do pole, můžete k jejich procházení použít funkci $.each. Líbí se mi toto:

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

To lze provést v „čistém“ JavaScript, uděláte něco takového, pokud používáte syntaxi ES6:

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

Pro všechny prohlížeče nepodporující ES6 (včetně všech verzí IE):

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

Pokud je vyžadována podpora IE8:

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

Což bude o něco rychlejší ve srovnání s používáním jQuery . Nejkratším kódem však bude i nadále jQuery:

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

Komentáře

• Děkuji. Možná se zabývám více než 100 prvky, protože to bude použito v sekci komentářů. ' Provedu srovnávací testy s oběma kódy a poskytnu zpětnou vazbu, až bude vše hotovo. Napadlo mě, jestli by bylo možné místo toho použít document.getElementsByClassName() a smyčku for. Zkoušel jsem to, ale ' to nemohl fungovat.Totéž jsem použil pro smyčku a document.getElementsByClassName('class')[i].name

K získání požadovaných prvků můžete použít document.querySelectorAll:

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

Nebo jako jednu linku k načtení jmen jako Array:

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

Komentáře

• Proč input[class="class"] a ne input.class? (Pokud konkrétně nechcete vyloučit prvky s více třídami.)
• Žádný konkrétní důvod, proto změňte odpověď. Nezmění ' výsledky.

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

V závislosti na znalostech vašeho Domu může být super efektivní; můžete vybrat nadřazený uzel, který chcete prohledat, nebo prostě přejít do dokumentu, pokud nemáte žádné konkrétní znalosti Domu.

Pokud používáte vlastní prvky nebo vlastní prostor jmen, může to být velmi výkonné a nevyžaduje žádné doplňky z knihovny. Funguje ve všech moderních prohlížečích.

Platforma roste a nyní může dělat úžasné věci.