Szerezzük meg az egyes elemek névattribútumának értékét a class = “ class ”

Tiszta JS vs jQuery

A tiszta JavaScript lényegesen gyorsabb lesz, amint e jsPerf alapján láthatja, amely a document.getElementByClassName vs jQuery választó. Itt a Chrome 25 eredményei:

• $(".class") – 4355 műveletek másodpercenként
• getElementsByClassName("class") – 94636 műveletek másodpercenként

Mint láthatja, ehhez az egyszerű művelethez a jQuery opció körülbelül 22-szer lassabb, mint a pure-JavaScript megfelelője. A jQuery fejlesztési forrás áttekintésével könnyedén megtudhatja, miért van ez így, mivel a jQuery “választó funkció” olyan általános, hogy sok mindent meg kell tennie. megnézi, mi az a bemenet, mielőtt cselekedhetne rajta.

Tiszta JS megvalósítás

Kiléptem a jQuery click eseményből mivel úgy tűnik, hogy már függ a jQuery-től, így nincs értelme megváltoztatni az események összekapcsolásának módját.

jsFiddle

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

getElementsByClassName

Ne feledje, hogy a getElementsByClassName -t is használtam. Nagyon fontos kiválasztani az ideális választót, ha érdekel a teljesítmény. Mivel minden elemnek fontos egy bizonyos osztálya, azonnal elvethetjük a többit, például a getElementsByTagName és a querySelectorAll elemeket, és választhatjuk az épített funkciót egy adott osztály elemeinek megtalálásához.

jQuery implementáció

Ez lenne az én jQuery-t használó megvalósításom, vegye figyelembe, hogy nem zavartam magam a jQuery objektum megszerzésével a (azaz. $(this)), mert a sima JavaScript attribútum ebben az esetben sokkal könnyebb.

jsFiddle

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

Megjegyzések

• Tökéletes. Bár szeretem a jQuery I-t kerülje el, amikor tiszta Javascript segítségével könnyen meg lehet csinálni. Valamilyen oknál fogva nem tudtam ' t korábban működésbe hozni, valószínűleg néma szintaxis hiba.
• Ugyanez. Beletelik egy kis időbe, mire körbejárja az összes JS-funkciót. Győződjön meg arról, hogy ' átnézi-e a böngésző hibáit a hibakeresés érdekében.
• Attól függően, hogy mit szeretne csinálni a name s-kel, használhatja a jQuery ' s .map() tömb megszerzéséhez.
• @RoToRa szerintem ugyanolyan hasznos lenne, mint a $(".class").each( function() {//stuff}); ebben az esetben, de köszönöm!

Ahelyett, hogy tárolná őket egy tömb, használhatja az $.each függvényt a hurok áthidalásához. Így:

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

Ehhez “tiszta” JavaScript, ilyesmit csinál, ha ES6 szintaxist használ:

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

Minden olyan böngésző számára, amely nem támogatja az ES6-ot (beleértve az IE összes verzióját is):

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

Ha IE8 támogatás szükséges:

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

Ez valamivel gyorsabb lesz a jQuery használatához képest . A jQuery azonban továbbra is a legrövidebb kód lesz:

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

Megjegyzések

• Köszönöm. Lehet, hogy 100+ elemmel foglalkozom, mivel ezt egy megjegyzés részben használjuk fel. ' Végzek néhány benchmark-ot mindkét kóddal, és visszajelzést adok, ha minden kész. Arra gondoltam, hogy lehetséges-e helyette használni a document.getElementsByClassName() és egy for ciklust. Megpróbáltam, de nem sikerült ' elérni.Ugyanezt használtam a hurokhoz és a document.getElementsByClassName('class')[i].name

A document.querySelectorAll segítségével megkeresheti a kívánt elemeket:

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

Vagy egy vonalként a nevek lekéréséhez Array:

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

megjegyzések

• miért input[class="class"] és nem input.class? (Hacsak nem kifejezetten több osztályú elemeket szeretne kizárni.)
• Nincs különösebb ok, ezért változtassa meg a választ. Nem változtatja meg az eredményeket '.

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

Attól függően, hogy ismeri Dom-ját, szuper hatékony lehet; kiválaszthatja a szülőcsomópontot a kereséshez, vagy egyszerűen csak megy a dokumentumba, ha nincs konkrét Dom ismerete.

Ha egyedi elemeket vagy egyéni névteret használ, az nagyon hatékony lehet, és nem igényel könyvtár hozzáadását. Minden modern böngészőben működik.

A platform növekszik, és most elképesztő dolgokra képes.