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 等后缀类的数量增加 n(例如，增加 1)，以便生成的类变为 page-2, page-3 等等 ?

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

一种方法是使用 class 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];