Назначьте следующий элемент с другим классом в jQuery

Question

У меня есть список кнопок, подобных этой:

<a href="#" class="btn green">Button</a>
<a href="#" class="btn green">Button</a>
<a href="#" class="btn red">Button</a>
<a href="#" class="btn red">Button</a>

Количество кнопок может варьироваться. Я хочу выбрать первую красную кнопку и изменить ее класс с красного на синий, чтобы список выглядел следующим образом:

<a href="#" class="btn green">Button</a>
<a href="#" class="btn green">Button</a>
<a href="#" class="btn blue">Button</a>
<a href="#" class="btn red">Button</a>

Как этого добиться?

Answer 1

С помощью JQuery: возьмите все элементы с «красным» классом, затем выберите первый, удалите его красный класс и добавьте синий класс

$($(".red")[0]).removeClass("red").addClass("blue");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.green{color: green;}
.red{color: red;}
.blue{color: blue;}
</style>
<a href="#" class="btn green">Button</a>
<a href="#" class="btn green">Button</a>
<a href="#" class="btn red">Button</a>
<a href="#" class="btn red">Button</a>