如何不用迭代更改所有元素的类名？

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 ....

现在，如何通过page-1, page-2等n (e.g. by 1)来增加后缀类的数量，从而使类变成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);
});