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

さて、結果のクラスが etc. になるように、page-1, page-2etc. byのような接尾辞クラスの数を増やすにはどうすればよいですか?n (e.g. by 1)page-2, page-3

つまり、クラスの数だけpage-1が増加し、page-1クラスはpage-2

1 つの方法は、クラスを使用してすべての要素を反復処理し、クラスtestを削除して新しいクラスを追加することです。

パフォーマンスを向上させるためにこれを達成するためのより良い方法はありますか?

ユースケースは、挿入されたページが現在のページになり、その後のページ番号が1ずつ増加するように、divの間にページを挿入する必要がある場合です。

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