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属性setter结合起来，你会得到：

$(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);
        }
    });
});

使用jQuery增加元素的一个类名

2 个答案: