Jquery Klasse entfernen und durch eine neue ersetzen

Question

Wenn ich auf eine Schaltfläche klicke, möchte ich eine Klasse entfernen und durch eine andere ersetzen. Ich habe folgende HTML-Inhalt:

<div class="mainDiv-34"> 
    <div class="row one red"></div> 
    <div class="row two red"></div> 
    <div class="row three red"></div> 
</div> 

Was möchte ich tun, ist, das class="row two red" von class="row two green" zu ersetzen, aber die Reihe zwei grüne ist neben meinem mainDiv-34 statt added! Warum ?

Hier ist meine JS:

$('.mainDiv-34').removeClass("row two red").addClass("row two green"); 

Answer 1

$('.mainDiv-34') bedeutet, dass Sie die Top-Level div auswählen.

Sie brauchen so etwas wie diese stattdessen zu tun:

$('.row.one.red').removeClass("row one red").addClass("row one green"); 

Answer 2

Sie sind nicht das Recht div auswählen.

$('.mainDiv-34 div.row.two.red').removeClass("row two red").addClass("row two green"); 

Answer 3

$('.mainDiv-34').find('div.two').removeClass("red").addClass("green"); 

Answer 4

Es ist, weil Sie die Klassen an der Mutter div entfernen/Hinzufügen, versuchen

$(".mainDiv-34").find(".row.two").removeClass("red").addClass("green") 

Answer 5

Ihre Wähler Punkte an die Mutter div .mainDiv-34. Sie müssen auf die untergeordneten Elemente abzielen.

Szenario 1: Ändern Sie die Klasse für ein bestimmtes Element in .mainDiv-34.

$('.mainDiv-34 div.row.two').removeClass('red').addClass('green'); 

Szenario 2: Ändern Sie die Klasse auf alle Elemente innerhalb .mainDiv-34 mit Klasse row.

$('.mainDiv-34 div.row').removeClass('red').addClass('green'); 

Szenario 3: Kipp- Klasse auf einem alle Elemente innerhalb .mainDiv-34 mit Klasse row.

$('.mainDiv-34 div.row').click(function() 
{ 
    $(this).toggleClass('red green'); 
}); 

Beispiel: https://jsfiddle.net/DinoMyte/r3yuyapk/