Wählen Sie und fügen Sie der Klasse in javascript

Cross-Plattform-falls möglich, wie kann ich wählen Sie Klassen in Javascript (aber nicht Jquery-bitte -MooTools ist gut, obwohl-) code, ich kann nicht fügen Sie eine ID?
Insbesondere möchte ich hinzufügen, dass die Klasse "cf" auf alle li unten:

HTML

<div class="itemRelated">
  <ul>
<li class="even">
<li class="odd">
<li class="even">

Habe ich versucht zu hantieren, aber etwas fehlt:

Javascript

 var list, i;
list = document.getElementsByClassName("even, odd");
for (i = 0; i < list.length; ++i) {
    list[index].setAttribute('class', 'cf');
}

JSFiddle

ps. Diese Frage phänomenal ist möglich Duplikate, (anderen ein), aber keine der Antworten deutlich macht.

  • Interessieren Einhaltung in bestimmten IE-version?
  • nicht genau eine bestimmte IE-version, nur zur Unterstützung moderner Browser und die bestmögliche Kombination von alten IE-Versionen. Ich hätte nichts dagegen, wenn IE6 oder IE7 werden nicht in Frage, zum Beispiel, aber wenn es etwas gibt, brauchbar, würde ich es nehmen.
InformationsquelleAutor Yannis Dran | 2014-01-23
  1. 16

    Mit plain javascript:

    var list;
list = document.querySelectorAll("li.even, li.odd");
for (var i = 0; i < list.length; ++i) {
   list[i].classList.add('cf');
}

    Demo

    Für ältere Browser könnten Sie diese:

    var list = [];
var elements = document.getElementsByTagName('li');
for (var i = 0; i < elements.length; ++i) {
    if (elements[i].className == "even" || elements[i].className == "odd") {
        list.push(elements[i]);
    };
}
for (var i = 0; i < list.length; ++i) {
    if (list[i].className.split(' ').indexOf('cf') < 0) {
        list[i].className = list[i].className + ' cf';
    }
}

    Demo

    Mit Mootools:

    $$('.itemRelated li').addClass('cf');

    Demo

    oder wenn Sie wollen, um bestimmte, die durch die Klasse:

    $$('li.even, li.odd').addClass('cf');

    Demo

    • Danke. Nur um zu lernen, was ist, wenn ich will, um eine zweite Klasse nur für li.ungerade? Ich habe versucht, diese $$('li.auch, li.ungerade").addClass('cf','sec'); aber nicht zu arbeiten scheinen.
    • dann können Sie trennen Sie mit einem Leerzeichen. Prüfen Sie hier: jsfiddle.net/n4L5w/2
    • hinzufügen von Klassen mit .addClass() Raum und ist nicht gerade eine gute Idee - funktioniert, weil der code nicht geprüft, arg vergangen, aber bedingt classList ändern, werden abgelehnt - siehe github.com/mootools/mootools-core/commit/... - zu sehen, wie diese können einen negativen Effekt hier: jsfiddle.net/3EyzL. addClass sollten keine doppelten Klassen, hinzufügen Platz entfernt, die Sicherheit.
    • vielen Dank für die Warnung/Korrektur ! Ist element.addClass('bar').addClass('foo'); die beste Lösung dann?
    • so steht es in der aktuellen Implementierung, Leerzeichen funktionieren - so lange, wie Sie sicher sind, dass keine der beiden Klassen sind bereits auf das element, verwenden Sie es. ansonsten, Kette, zwei, wie Sie sagte. siehe auch youtube.com/watch?v=hZJacl2VkKo - hängt vom Anwendungsfall und so weiter.
    • bitte Lesen Sie gute Eingabe von Dimitar in den Kommentaren hier.
    • hast du diese arbeiten?
    • Ja! Danke für die Erinnerung und für Eure Hilfe.
    • Schöne Frage Yannis! Und tolle Antwort @Sergio ! Seine sehr hilfreich.

    InformationsquelleAutor Sergio
  2. 3

    Mit einigen neueren browser-Objekte und Methoden.

    Reine JS:
    Details: altmodische Weise, mit der Erklärung Zeug am beginging als Iteration in einer großen Schleife über die Elemente mit dem index 'i', keine große Wissenschaft hier. Eine Sache ist mit classList Objekt, das ein intelligenter Weg, um hinzufügen/entfernen/check-Klassen innerhalb von arrays.

    var elements = document.querySelectorAll('.even','.odd'),
    i, length;

for(i = 0, length = elements.length; i < length; i++) {
    elements[i].classList.add('cf');
}

    Reine JS - 2:
    Details: - Dokument.querySelectorAll gibt ein array-artiges Objekt zugegriffen werden kann über Indizes hat aber keine Array-Methoden. Aufruf Scheibe von Array.Prototyp liefert ein array geholt Elemente, die sofort (wahrscheinlich der Schnellste NodeList -> Array-Konvertierung). Als Sie verwenden können, eine .forEach Methode auf neu erstellte array-Objekt.

    Array.prototype.slice.call(document.querySelectorAll('.even','.odd'))
 .forEach(function(element) {
    element.classList.add('cf');
});

    Reine JS - 3:
    Details: dies ist ziemlich ähnlich, v2, [].map ist in etwa das gleiche wie Array.prototype.map außer hier erklären Sie ein leeres array aufrufen der map-Methode. Es ist kürzer, aber mehr (ok etwas mehr) Speicher. .map Methode führt eine Funktion auf jedem element aus dem array und gibt ein neues array zurück (hinzufügen Rückkehr in innerhalb der Funktion würde dazu führen, füllen Sie die zurückgegebenen Werte, es ist hier unbenutzt).

    [].map.call(document.querySelectorAll('.even','.odd'), function(element) {
    element.classList.add('cf');
});

    Wählen Sie ein, und verwenden 😉

    • Danke, mein Fehler.
    InformationsquelleAutor veritas
  3. 2

    querySelectorAll unterstützt, IE8, getElementsByClassName ist nicht, das nicht zwei Klassen gleichzeitig. Keiner von Ihnen arbeiten im iE7, aber who cares.

    Dann ist es nur eine Frage der Iteration und die Erweiterung der className Eigenschaft.

    var list = document.querySelectorAll(".even, .odd");
for (var i = list.length; i--;) {
    list[i].className = list[i].className + ' cf';
}

    GEIGE

    InformationsquelleAutor adeneo
  4. 2

    Als andere erwähnen, die für die Auswahl der Elemente, die Sie verwenden sollten .querySelectorAll() Methode. DOM bietet auch classList API unterstützt das hinzufügen, entfernen und Umschalten Klassen:

    var list, i;
list = document.querySelectorAll('.even, .foo');
for (i = 0; i < list.length; i++) {
    list[i].classList.add('cf');
}

    Wie immer in IE9 und Balg nicht unterstützt können Sie die API, wenn Sie möchten, unterstützt diese Browser können Sie ein shim verwenden, MDN hat ein.

    InformationsquelleAutor undefined
  5. 1

    Ich weiß, das ist alt, aber gibt es irgendeinen Grund, nicht einfach das (neben möglicher browser-support-Probleme)?

    document.querySelectorAll("li.even, li.odd").forEach((el) => {
    el.classList.add('cf');
});

    Unterstützung: https://caniuse.com/#feat=es5

    InformationsquelleAutor MuffinTheMan
Schreibe einen Kommentar