javascript - 在 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>

如何做到这一点？

标签： javascriptjquery

Answer 1

使用 JQuery：获取所有带有“red”类的元素，然后选择第一个并删除它的红色类并添加蓝色类

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