JavaScript. Replacement of one of the classes in the block by another

[Raziyah00]

There are several single parent blocks of daughter-in-laws assigned to several classes. 1 group red green blue 2 black green blue

<div class="parrent">
  <div class="red green blue"></div>
  <div class="red green blue"></div>
  <div class="red green blue"></div>
  <div class="black green blue"></div>
  <div class="black green blue"></div>
  <div class="red green blue"></div>
  <div class="reset">Сбросить</div>
</div>
<div class="parrent">
  <div class="red green blue"></div>
  <div class="red green blue"></div>
  <div class="black green blue"></div>
  <div class="black green blue"></div>
  <div class="black green blue"></div>
  <div class="red green blue"></div>
  <div class="reset">Сбросить</div>
</div>

I need you to put the "stop" on the button. black Changed to class. redbut the sequence of classes is left as the units of the first group (red green blue) strictly obligatory or the button of "death" will only perform visual function and the code will not return to its original state. tried the following:

$(".reset").click(function() {
     $("div.black").addClass('red');
     $("div").removeClass('black');     

});

In this case, everything works, but class. red attached at the end
And it looks like this.

♪ ♪ ♪ ♪ ♪ ♪

<div class="green blue red"></div>

♪ ♪ ♪ ♪ ♪
I, uh, made a reservation: http://jsfiddle.net/cc91juvz/6/ Tell me what to do.

[briley]

JQuery isn't your lipstick because, with the CSS and HTML, the order of classes doesn't matter. If it matters in your code, it's a bug, fix it. If you still want to maintain a special order, you don't understand why you're processing the Class manually, the methods of AddClass and RemoveClass work in speculation, not your weird requirements.