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 red" на class="row two green", но ряд две зеленые является addded рядом с моим mainDiv-34 вместо этого! Зачем ?

Вот мой JS:

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

Answer 1

$('.mainDiv-34') означает, что вы выбираете верхний уровень DIV.

Вам нужно сделать что-то вроде этого, вместо:

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

Answer 2

Вы не выбираете правильный DIV.

$('.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").find(".row.two").removeClass("red").addClass("green") 

Answer 5

Ваши очки селекторами родительского DIV .mainDiv-34. Вам нужно настроить таргетинг на его дочерние элементы.

Сценарий 1: Измените класс на определенный элемент внутри .mainDiv-34.

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

Сценарий 2: Измените класс по всем элементам внутри .mainDiv-34 с классом row.

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

Сценарий 3: тумблер класс по всем элементам внутри .mainDiv-34 с классом row.

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

Пример: https://jsfiddle.net/DinoMyte/r3yuyapk/