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

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现在，我怎样才能增加诸如etc.之类的后缀类的数量，n (e.g. by 1)从而使结果类变为page-2, page-3etc. ？

即只有班级数量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

利用：

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

Answer 3

试试这个：

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