Liefert den Wert des Namensattributs jedes Elements mit class = "class"

144875
Quelle (EN)
Alex

Ich brauche eine Funktion, um den Wert des Namensattributs jedes Elements mit class = "class" zu erhalten. Ich habe mich gefragt, was der beste Weg ist, dies zu tun, was die Leistung angeht.

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"));
    }
});

Alert ist natürlich nur um zu zeigen, was es tut. Für das folgende HTML:

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

Es würde ausgeben:

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

Ich habe mich gefragt, ob die Verwendung von reinem Javascript schneller wäre oder ob es einen anderen (besseren) Weg gibt. Ich bitte um Entschuldigung, falls diese Frage nicht im Umfang dieser Website liegt. Bitte verschieben Sie sie in diesem Fall zu Stackoverflow.

Antworten
8
Bitte ersetzen Sie immer den Alarm durch console.log Der Alarm blockiert die Codeausführung und zwingt Sie, so oft auf OK zu klicken oder die Eingabetaste zu drücken, wenn ein Ergebnis gefunden wird. Apero vor 6 Jahren 3

5 Antworten auf die Frage

9
Daniel Imms

Reine JS vs JQuery

Reines JavaScript wird deutlich schneller sein, wie Sie anhand dieser jsPerf-Datei sehen können, die document.getElementByClassNamegegenüber dem jQuery-Selektor pits ist . Hier sind die Ergebnisse für Chrome 25:

  • $('.class')- 4355 Operationen pro Sekunde
  • getElementsByClassName('class')- 94636 Operationen pro Sekunde

Wie Sie sehen, ist die jQuery-Option für diese einfache Operation etwa 22-mal langsamer als das reine JavaScript-Äquivalent. Sie können leicht erkennen, warum dies der Fall ist, indem Sie die jQuery-Entwicklungsquelle auschecken, da die 'Selector-Funktion' von jQuery so allgemein ist, dass sie viele Überprüfungen durchführen muss, um zu sehen, was die Eingabe ist, bevor sie darauf reagieren kann.

Reine JS-Implementierung

Ich habe das jQuery- clickEreignis belassen, da es so aussieht, als hätten Sie bereits eine Abhängigkeit von jQuery, so dass es keinen Sinn hat, die Art und Weise zu ändern, wie Sie Ihre Ereignisse verbinden.

jsFiddle

$("#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 verwendet habe getElementsByClassName. Es ist sehr wichtig, den idealen Selector zu wählen, wenn Sie Wert auf Leistung legen. Da wir über alle Elemente mit einer bestimmten Klasse Pflege entlassen können wir sofort die andere wie getElementsByTagNameund querySelectorAllund für die Funktion wählen, die für die Suche nach Elementen einer bestimmten Klasse gebaut wurden.

jQuery-Implementierung

Dies wäre meine Implementierung mit jQuery. Beachten Sie, dass ich das jQuery-Objekt this(z. B. $(this)) nicht erhalten musste, da das einfache JavaScript-Attribut in diesem Fall viel einfacher ist.

jsFiddle

$("#Button").click(function() {
    $(".class").each(function() {
        alert(this.name);
    });
});
Perfekt. Obwohl ich jQuery mag, vermeide ich es, wenn es einfach mit reinem Javascript möglich ist. Aus irgendeinem Grund konnte ich es vorher nicht zum Laufen bringen, wahrscheinlich ein dummer Syntaxfehler. Alex vor 6 Jahren 0
Dito Es dauert eine Weile, bis Sie sich mit allen JS-Funktionen vertraut gemacht haben. Stellen Sie sicher, dass Sie die Fehler in Ihrem Browser betrachten, um sie zu debuggen. Daniel Imms vor 6 Jahren 0
Abhängig davon, was Sie mit den `Namen tun möchten, können Sie [jQuery's .map ()`] (http://api.jquery.com/map/) verwenden, um ein Array zu erhalten. RoToRa vor 6 Jahren 1
@RoToRa Ich denke, es wäre genauso nützlich wie `$ (". Class "). Each (function () {// stuff});` in diesem Fall, aber danke! Alex vor 6 Jahren 1
5
hjpotter92

Anstatt sie in einem Array zu speichern, können Sie die $.eachFunktion zum Durchlaufen verwenden. So was:

$("#Button").click(function() {
    $(".class").each( function() {
        alert( $(this).attr("name") );
    }
});
3
p.s.w.g

Um dies zu tun, verwenden Sie 'reines' JavaScript, 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 IE-Versionen):

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);
}

Das wird im Vergleich zu jQuery etwas schneller sein. JQuery ist jedoch immer noch der kürzeste Code:

$('.class').each(e => { alert(e.name); });
Vielen Dank. Ich könnte mich mit über 100 Elementen beschäftigen, da diese in einem Kommentarabschnitt verwendet werden. Ich werde mit beiden Codes ein Benchmarking durchführen und etwas Feedback geben, wenn alles erledigt ist. Ich habe mich gefragt, ob es möglich ist, stattdessen `document.getElementsByClassName ()` und eine for-Schleife zu verwenden. Ich habe es versucht, konnte es aber nicht schaffen. Ich habe dasselbe für loop und `document.getElementsByClassName ('class') [i] .name` verwendet Alex vor 6 Jahren 0
1
KooiInc

Sie können document.querySelectorAlldie gewünschten Elemente abrufen:

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

Oder als ein Liner, um Namen als Array: abzurufen :

var names = [].slice.call(document.querySelectorAll('input.class'))
             .map(function(el){return el.name});
//=> names is now [1,3]
Warum `input [class =" class "]` und nicht `input.class`? (Es sei denn, Sie möchten Elemente mit mehreren Klassen ausdrücklich ausschließen.) RoToRa vor 6 Jahren 0
Kein besonderer Grund, also die Antwort geändert. Ändert die Ergebnisse nicht. KooiInc vor 6 Jahren 0
0
Jason Frazzano 
parent.querySelectorAll([name='value']);

Je nach Kenntnis Ihres Doms kann er äußerst effizient sein. Sie können den übergeordneten Knoten auswählen, in dem gesucht werden soll, oder einfach zum Dokument gehen, 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 Bibliothekserweiterungen. Funktioniert in allen modernen Browsern.

Die Plattform wächst und kann jetzt erstaunliche Dinge tun.

Verwandte Probleme