javascript - 使用 jQuery 增加元素的类名之一

Question

我有许多 div 元素，每个元素都有三个类名。每个里面都有一个图像。它们i1, i2, i3通过类名连续编号（...）。类名类似于"img small i14". 我需要为每个元素增加这些类名的数量。

所以：对于这些 div 元素中的每一个，我需要更改以i开头的类- 加 1 或从中减去 1。希望有一种有效的方法来做到这一点。

整个事情的目标是创建一个旋转的图片库。我非常感谢帮助，无论是通过代码帮助还是提供解决问题的更好方法。谢谢你。

Answer 1

我认为没有任何 jQuery 工具可以让这变得更容易。我只需使用纯 JavaScript 即可：

function updateIndex( className ) {
  return className.replace(/\bi(\d+)\b/, function(_, n) {
    return 'i' + ((+n) + 1);
  });
}

然后您可以将元素的“className”属性传递给它，并将“className”更新为返回值：

element.className = updateIndex( element.className );

Answer 2

如果你将 Pointy 的 regExp 与 undefined 的 jQuery 属性设置器结合起来，你会得到：

$(a selector).attr('class', function (index, attrValue) {
    return attrValue.replace(/\bi(\d+)\b/, function (match, $1) { 
        return 'i' + (Number($1) + 1);
    });
});

哪个工作正常（我想是跨浏览器），因为该类是一个 html 属性。

编辑：要检查它是否是最后一张图像，您必须知道该容器中有多少张图像，因此您必须有一个 jquery 选择器，它只匹配其中一个容器中的图像。代码如下所示：

var number_of_elements = $(the selector).length;

$(the selector).attr('class', function (index, attrValue) {
    return attrValue.replace(/\bi(\d+)\b/, function (match, $1) { 
        var number = Number($1);
        if (number === number_of_elements) {
            return 1
        } else {
            return 'i' + (number + 1);
        }
    });
});