Javascript Jquery：循环遍历每个兄弟姐妹，并给每个兄弟姐妹一个不同的类？

我如何循环遍历每个兄弟姐妹并给他们每个人一个不同的类？但是，当一个类处于活动状态时，我希望从同级中删除所有类

现在我知道了：

$('.font-size').click(function() {
  $('.font-size.font-size-active').removeClass('font-size-active');
   $(this).addClass("font-size-active");
  });

所以基本上我有3个字体大小的div。当用户单击其中一个按钮时，该按钮会更改背景颜色。到目前为止，我已经成功了。然而，我想给他们每个人一个独特的附加类，相应地改变字体大小

我该怎么做？我脑子里有indexof，但不完全确定它是否有效，以及如何在这种情况下使用它

标记：

<span class="font-size">Small</span>
<span class="font-size">Medium</span>
<span class="font-size">Large</span>

小
中等
大的

---

编辑：.small、.medium、.large类将根据单击的按钮添加到.content div。

我将为要添加的类设置

数据属性：

<span class="font-size" data-class="small">Small</span>
<span class="font-size" data-class="medium">Medium</span>
<span class="font-size" data-class="large">Large</span>

请参阅下面的演示


var$size=$（'.font-size'）。单击（函数（）{
$size.removeClass（'font-size-active'）；
$（此）.addClass（“活动字体大小”）；
$（'.content'）.removeClass（'small-medium-large'）.addClass（$（this.data（'class'））；
});
.font size{填充：10px；显示：内联块；}
.font size活动{背景：#EEE；填充：10px；}
.small{字体大小：80%；}
.medium{字体大小：100%；}
.large{字体大小：120%；}

小的
中等
大的
Lorem ipsum dolor sit amet，奉献精英。实验室分子加速了目前的情况，这是一个类似于在一个最新的地方发生的事件您是否也会发布标记？如果您可以将其发布在JSFIDLE或类似的工具上，则更好。更改
$（'.font-size.font-size-active'）。removeClass（'font-size-active'）
到
$（'.font-size'）.removeClass（'font-size-active'）
@HanletEscaño I添加了标记。所以基本上，用户点击small，my.content div中的文本就会变小。如果单击“中等”，则所有内容都将变为中等大小，依此类推。因此，对于第一个字体大小范围，我在.content div中依次应用class.small、second.medium等。为每个应用程序添加一个唯一的附加类，该类会相应地更改字体大小。您到底想添加哪些类？@dfsq.small、.medium、.large类将根据单击的按钮添加到.content div。非常感谢您的帮助。我刚刚学到了一些新东西
var $sizes = $('.font-size').click(function () {
    $sizes.removeClass('font-size-active');
    $(this).addClass("font-size-active");
    $('.content').removeClass('small medium large').addClass($(this).data('class'));
});