如何在没有迭代的情况下更改所有元素的类名？

Question

我有这样的DOM结构:(使用jQuery）

<div class="test page-1">some code and more dom</div>
<div class="test page-2">some code and more dom</div>
<div class="test page-3">some code and more dom</div>
<div class="test page-4">some code and more dom</div>
<div class="test page-5">some code and more dom</div>
<div class="test page-6">some code and more dom</div>
<div class="test page-7">some code and more dom</div>

and few more ....

现在，我如何通过n (eg by 1)增加page-1, page-2等数字后缀类page-1, page-2以便生成的类成为page-2, page-3等？

即，只有page-1的类数量会增加， page-1类会变成page-2

一种方法是使用类test迭代所有元素并删除类并添加新类。

有没有更好的方法来实现这一目标以获得更高的性能？

用例是我必须在div之间插入页面，以便插入的页面成为当前页面，之后页面的数字将增加1。

Answer 1

最简洁的答案是不。 即使你想为所有元素添加相同的类，循环也会隐藏在$('.test').addClass('myClass')调用中。

您可以使用data-page属性，使用jQuery的.data()函数，或者不添加任何内容并使用$(this).index()或循环计数器来获取页码：

 $('.test').each(function(i) {
      // i is the page number ...
 });

 // accessing the i-th element :
 $('.test')[i];

Answer 2

试试这个：

$("[class*='page-']").each(function(){
    var 
    newClass,
    classParts,
    currentClass = $(this).attr('class');
    classParts = currentClass.split('-');
    newClass = classParts[0] +'-'+ (parseInt(classParts[1])+1);
    $(this).attr('class', newClass)
})

Answer 3

采用：

$(".test").each(function(index, element) {
     var classes = $(this).attr("class");
     var splitted = classes.split("-")[1];
     classes = classes.replace(splitted,String(parseInt(splitted)+1));
     $(this).removeAttr('class').addClass(classes);
});