Jqueryクラスを削除して新しいクラスに置き換えます

Question

ボタンをクリックすると、クラスを削除して他のクラスに置きたいと思います。 私は、次のHTMLコンテンツを持っている：私は何をしたいか

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

はclass="row two green"でclass="row two red"を交換することですが、行2つの緑色ではなく、私のmainDiv-34の隣にadd​​dedされます！どうして ？

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

Answer 1

$('.mainDiv-34')あなたはトップレベルのdiv要素を選択していることを意味します

は、ここに私のJSです。

あなたはこの代わりのような何かをする必要があります：あなたは、右のdivを選択していない

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

Answer 2

。

$('.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

あなたは親のdiv .mainDiv-34に

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

Answer 5

あなたの選択ポイントを試し、親のdivにクラスを追加/削除するからです。その子要素を対象にする必要があります。

シナリオ1：.mainDiv-34内の特定の要素のクラスを変更します。

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

シナリオ2：クラスrowと.mainDiv-34内のすべての要素にクラスを変更します。

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

シナリオ3：クラスrowと.mainDiv-34内のすべての要素にトグルクラス。

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

例：https://jsfiddle.net/DinoMyte/r3yuyapk/