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

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

3 个答案: