Ich benötige eine Funktion, um den Wert des Namensattributs jedes Elements mit class =“ class „abzurufen. Ich habe mich gefragt, wie dies in Bezug auf die Leistung am besten funktioniert.
Derzeit verwende ich jQuery und mache es so:
$("#Button").click(function() { var myElements = $(".class"); for (var i=0;i<myElements.length;i++) { alert(myElements.eq(i).attr("name")); } }); Warnung soll natürlich nur zeigen, was sie tut. Für den folgenden HTML-Code:
<input type="checkbox" class="class" name="1"> <input type="checkbox" class="nope" name="2"> <input type="checkbox" class="class" name="3"> Es würde Folgendes ausgeben:
alert("1") alert("3") Ich habe mich gefragt, ob die Verwendung von reinem Javascript schneller ist oder ob es eine andere (bessere) Möglichkeit gibt. Ich entschuldige mich, wenn diese Frage nicht auf dieser Website steht Bitte verschieben Sie es in den Stackoverflow, wenn dies der Fall ist.
Kommentare
- Bitte ersetzen Sie die Warnung immer durch console.log. Warnung blockiert Code Ausführung und zwingt Sie, auf OK zu klicken oder die Eingabetaste so oft zu drücken, wie das Ergebnis gefunden wurde.
Antwort
Pure JS vs jQuery
Reines JavaScript ist erheblich schneller, wie Sie an dieser jsPerf sehen können, die document.getElementByClassName gegen den jQuery-Selektor. Hier sind die Ergebnisse für Chrome 25:
-
$(".class")– 4355 Operationen pro Sekunde -
getElementsByClassName("class")– 94636 Operationen pro Sekunde
Wie Sie sehen können, ist die jQuery-Option für diese einfache Operation ungefähr 22-mal langsamer als das reine JavaScript-Äquivalent. Sie können leicht erkennen, warum dies der Fall ist, indem Sie die jQuery-Entwicklungsquelle überprüfen, da die jQuery-Auswahlfunktion so allgemein ist, dass viel getan werden muss Überprüft, ob es sich um eine Eingabe handelt, bevor sie darauf reagieren kann.
Reine JS-Implementierung
Ich habe das Ereignis jQuery click verlassen Wie es aussieht, haben Sie bereits eine Abhängigkeit von jQuery, sodass es keinen Sinn macht, die Art und Weise zu ändern, in der Sie Ihre Ereignisse verbinden.
$("#Button").click(function() { var items = document.getElementsByClassName("class"); for (var i = 0; i < items.length; i++) alert(items[i].name); }); getElementsByClassName
Beachten Sie auch, dass ich getElementsByClassName verwendet habe. Es ist ziemlich wichtig, den idealen Selektor zu wählen, wenn Sie Wert auf Leistung legen. Da wir uns um alle Elemente einer bestimmten Klasse kümmern, können wir die anderen wie getElementsByTagName und querySelectorAll sofort schließen und uns für die erstellte Funktion entscheiden
jQuery-Implementierung
Dies wäre meine Implementierung mit jQuery. Beachten Sie, dass ich das jQuery-Objekt für (dh $(this)), da das einfache JavaScript-Attribut in diesem Fall viel einfacher ist.
$("#Button").click(function() { $(".class").each(function() { alert(this.name); }); }); Kommentare
- Perfekt. Obwohl ich jQuery I mag Vermeiden Sie es, wenn es einfach mit reinem Javascript möglich ist. Aus irgendeinem Grund konnte ich ‚ es vorher nicht zum Laufen bringen, wahrscheinlich einen dummen Syntaxfehler.
- Ditto. Es dauert eine Weile, bis Sie sich mit allen JS-Funktionen vertraut gemacht haben. Stellen Sie sicher, dass Sie ‚ Ihre Browserfehler überprüfen, um sie zu debuggen. L. i>
- Je nachdem, was Sie mit den
names tun möchten, können Sie jQuery s.map(), um ein Array zu erhalten. - @RoToRa Ich denke, es wäre genauso nützlich wie
$(".class").each( function() {//stuff});in diesem Fall, aber danke!
Antwort
Anstatt sie zu speichern In einem Array können Sie die Funktion $.each verwenden, um sie zu durchlaufen. So:
$("#Button").click(function() { $(".class").each( function() { alert( $(this).attr("name") ); } }); Antwort
Dies ist in „pure“ JavaScript, Sie tun Folgendes, wenn Sie die ES6-Syntax verwenden:
var elements = document.getElementsByClassName("class"); elements.forEach(e => { alert(e.name) }); Für alle Browser, die ES6 nicht unterstützen (einschließlich aller Versionen von IE):
var elements = document.getElementsByClassName("class"); elements.forEach(function(e) { alert(e.name); }); Wenn IE8-Unterstützung erforderlich ist:
var elements = document.querySelectorAll(".class"); for (var i = 0; i < elements.length; i++) { alert(elements[i].name); } Dies ist im Vergleich zur Verwendung von jQuery etwas schneller . JQuery ist jedoch immer noch der kürzeste Code:
$(".class").each(e => { alert(e.name); }); Kommentare
- Vielen Dank. Ich habe es möglicherweise mit mehr als 100 Elementen zu tun, da dies in einem Kommentarbereich verwendet wird. Ich ‚ werde mit beiden Codes ein Benchmarking durchführen und Feedback geben, wenn alles erledigt ist. Ich habe mich gefragt, ob es möglich wäre, stattdessen
document.getElementsByClassName()und eine for-Schleife zu verwenden. Ich habe es versucht, konnte es aber ‚ nicht zum Laufen bringen.Ich habe dasselbe für loop unddocument.getElementsByClassName('class')[i].name
Antwort
verwendet Sie können document.querySelectorAll verwenden, um die gewünschten Elemente abzurufen:
var namedEls = document.querySelectorAll("input.class"); for (var i=0;i<namedEls.length;i+=1){ console.log(namedEls[i].name); } //=> 1, 3 Oder als einen Liner, um Namen als Array:
var names = [].slice.call(document.querySelectorAll("input.class")) .map(function(el){return el.name}); //=> names is now [1,3] Kommentare
- Warum
input[class="class"]und nichtinput.class? (Es sei denn, Sie möchten Elemente mit mehreren Klassen ausdrücklich ausschließen.) - Kein besonderer Grund, daher wurde die Antwort geändert. Ändert ‚ die Ergebnisse nicht.
Antwort
parent.querySelectorAll([name="value"]); Abhängig von Ihrem Wissen über Ihren Dom kann dies sehr effizient sein. Sie können den übergeordneten Knoten auswählen, in dem gesucht werden soll, oder einfach zum Dokument wechseln, wenn Sie keine spezifischen Dom-Kenntnisse haben.
Wenn Sie benutzerdefinierte Elemente oder einen benutzerdefinierten Namensraum verwenden, kann dies sehr leistungsfähig sein und erfordert keine Bibliotheks-Add-Ons. Funktioniert in allen modernen Browsern.
Die Plattform wächst und kann jetzt erstaunliche Dinge tun.