Tarvitsen funktion saadaksesi arvon jokaiselle elementille, jolla on class =” class ”. Mietin, mikä on paras tapa tehdä tämä, suorituskykyisesti.

Tällä hetkellä käytän jQueryä ja teen sen näin: 

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

Hälytys on tietysti vain osoitettava, mitä se tekee. Seuraavan HTML-koodin osalta: 

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

Se aiheuttaisi: 

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

Mietin, olisiko puhtaan Javascriptin käyttö nopeampaa vai onko jokin muu (parempi) tapa tehdä se. Pahoittelen, jos tätä kysymystä ei löydy tältä verkkosivustolta, s soveltamisalaan, siirrä se Stackoverflow-kansioon, jos näin on.

Kommentit

  • Korvaa aina hälytys konsolilla. blogi hälytys estää koodin suorituksen ja pakottaa sinut napsauttamaan ok tai painamalla Enter niin monta kertaa, kuin tuloksena on.

Vastaa

Pure JS vs jQuery

Pure JavaScript on huomattavasti nopeampi, kuten voit nähdä tämän jsPerf -sivun kautta, joka lävistää document.getElementByClassName vs. jQuery-valitsin. Täällä ovat tuloksia Chrome 25:

  • $(".class") – 4355 operaatiot sekunnissa
  • getElementsByClassName("class") – 94636 operaatiota sekunnissa

Kuten näette, tälle yksinkertaiselle toiminnolle jQuery-vaihtoehto on noin 22 kertaa hitaampi kuin puhdas-JavaScript-vastaava. Voit helposti selvittää, miksi näin on, tutustumalla jQuery -kehityslähteeseen , koska jQuery ”valitsintoiminto” on niin yleinen, että sen täytyy tehdä paljon tarkistaa, mikä syöte on, ennen kuin se voi toimia sen mukaan.

Puhdas JS-toteutus

Olen poistunut jQuery click -tapahtumasta koska näyttää siltä, että sinulla on jo riippuvuus jQuerystä, joten ei ole syytä muuttaa tapaa, jolla kytket tapahtumasi.

jsFiddle 

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

getElementsByClassName

Huomaa myös, että käytin getElementsByClassName. On melko tärkeää valita ihanteellinen valitsin, jos välität suorituskyvystä. Koska välitämme kaikista elementeistä tietyllä luokalla, voimme välittömästi hylätä muut, kuten getElementsByTagName ja querySelectorAll, ja valita rakennetun toiminnon tietyn luokan elementtien etsimiseen.

jQuery-toteutus

Tämä olisi minun toteutukseni jQuery-sovelluksen avulla. ”>

(ts.$(this)), koska tavallinen JavaScript-attribuutti on tässä tapauksessa paljon helpompaa.

jsFiddle 

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

Kommentit

  • Täydellinen. Vaikka pidän jQuerystä, pidän siitä vältä sitä, kun se voidaan helposti tehdä puhtaalla Javascriptilla. Jostain syystä en voinut ’ tehdä sitä toimimaan aiemmin, luultavasti tyhmä syntaksivirhe.
  • Sama. Vie jonkin aikaa päästäksesi JS-toimintojen ympärille, varmista, että ’ tarkastelet selaimesi virheitä virheen selvittämiseksi.
  • Riippuen siitä, mitä haluat tehdä name s: llä, voit käyttää jQuery ’ s .map() taulukon saamiseksi.
  • @RoToRa Mielestäni se olisi yhtä hyödyllinen kuin $(".class").each( function() {//stuff}); tässä tapauksessa, mutta kiitos!

Vastaa

sen sijaan, että tallentaisit ne taulukkoa, voit käyttää $.each -toimintoa silmukoitaaksesi niiden läpi. Näin: 

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

Vastaa

Voit tehdä tämän ”puhtaana” JavaScript, teet jotain tällaista, jos käytät ES6-syntaksia: 

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

Kaikille selaimille, jotka eivät tue ES6: ta (mukaan lukien kaikki IE-versiot): 

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

Jos tarvitaan IE8-tuki: 

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

Mikä on vähän nopeampi verrattuna jQueryn käyttöön . JQuery on kuitenkin edelleen lyhin koodi: 

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

kommentit

  • Kiitos. Voisin olla tekemisissä yli 100 elementin kanssa, koska sitä käytetään kommenttiosassa. Teen ’ vertailuanalyysin molemmilla koodeilla ja annan palautetta, kun kaikki on tehty. Mietin, voisiko sen sijaan käyttää document.getElementsByClassName() ja for for -silmukkaa. Yritin, mutta en voinut ’ saada sitä toimimaan.Käytin samaa silmukassa ja document.getElementsByClassName('class')[i].name

vastaus

Voit hakea halutut elementit document.querySelectorAll -toiminnolla: 

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

Tai noutaa nimet yhtenä rivinä Array: 

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

kommentit

  • miksi input[class="class"] eikä input.class? (Ellet halua nimenomaan sulkea pois elementtejä, joissa on useita luokkia.)
  • Ei erityistä syytä, joten vaihda vastausta. Ei muuta ’ tuloksia.

Vastaa 

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

Dom-tietosi mukaan voi olla erittäin tehokas; Voit valita vanhemmasolmun etsittäväksi tai vain mennä asiakirjaan, jos sinulla ei ole erityistä Dom-tietoa.

Jos käytät mukautettuja elementtejä tai mukautettua nimiavaruutta, se voi olla erittäin tehokas eikä vaadi kirjaston lisäyksiä. Toimii kaikissa moderneissa selaimissa.

Alusta kasvaa ja voi nyt tehdä upeita asioita.

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *