Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Klassen XY im Dokument ersetzen
#1
Hallo zusammen,

ich möchte gerne zwei Klassen auf meiner Website mit JavaScript ersetzen.
Da die Klassen bzw. die Divs öfter auf der Seite vorkommen, kann ich nicht nach einer ID abfragen, was ja meist getan wird.

Grundsätzlich möchte ich gerne class="col-sm-12 col-md-6" durch class="col-sm-12 col-md-4" und class="status-soon" durch class="hide" ersetzen.

Kann mir jemand schreiben, wie ich das am einfachsten und ohne ID-Abfrage umsetzen kann?

Danke & beste Grüße
Markus
Zitieren
#2
Dafür gibt es remove and add class
Zb für ein Element
Code:
const div =  document.querySelector('div');
div.classList.remove('col-sm-12 col-md-6');
div.classList.add('col-sm-12 col-md-4');

Für alle divs müßte es so gehen
Code:
const div =  document.querySelectorAll('div');
div.forEach(function(g){
g.classList.remove('col-sm-12 col-md-6');
g.classList.add('col-sm-12 col-md-4');
})

Ist jetzt ungetestet
Hier sind alle meine Lösungen aus allen Foren. Ich helfe auch in Facebook-chat
Zitieren
#3
(25.08.2022, 17:12)admin schrieb: Dafür gibt es remove and add class
Zb für ein Element
Code:
const div =  document.querySelector('div');
div.classList.remove('col-sm-12 col-md-6');
div.classList.add('col-sm-12 col-md-4');

Für alle divs müßte es so gehen
Code:
const div =  document.querySelectorAll('div');
div.forEach(function(g){
g.classList.remove('col-sm-12 col-md-6');
g.classList.add('col-sm-12 col-md-4');
})

Ist jetzt ungetestet

Habe dazu alle möglichen Varianten ausprobiert, doch es will einfach nicht. 

Eine Variante z. B. wäre
Code:
        const div =  document.querySelectorAll('div');
        div.forEach(function(g){
        g.className.remove('col-md-6');
        g.className.add('col-md-4');
        })


Leider funktioniert auch das nicht.

Habe einen neuen Ansatz gefunden, mit dem ich zumindest das erste Element mit der Klasse "col-md-6" ändern kann.
Wenn man daraus jetzt noch eine Schleife zaubern könnte, die alle Elemente mit dieser Klasse ändern könnte, wäre das prima!


Code:
        function replaceClass()
        {
          var plusLinks = document.querySelectorAll('.col-md-6');
          var firstLink = plusLinks[0];
          firstLink.setAttribute('class', 'col-md-4');
        }
        replaceClass();
Zitieren
#4
Jo , eigentlich das, was ich schon geschrieben hatte.
So geht es bei mi du siehst
Hier sind alle meine Lösungen aus allen Foren. Ich helfe auch in Facebook-chat
Zitieren
#5
Der Teufel steckt ja meist im Detail.

So funktioniert das prima! Besten Dank dafür!
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
1 Gast/Gäste