jQueryを使用して、同じクラス名を持つすべての要素にインクリメンタルに数字を追加してください

Question

これを行う方法を知るためには、正しい単語を取得できませんでした。私のページには、クラス「z-タイトル」を持つ多数のスパン要素があります。私はあなたの助けのために、この

<span class="z-title tab1">Hello</span> 
<span class="z-title tab2">Hello</span> 
<span class="z-title tab3">Hello</span> 

おかげでこの

<span class="z-title">Hello</span> 
<span class="z-title">Hello</span> 
<span class="z-title">Hello</span> 

から例

ため、増分番号が含まれ、これらの要素に追加のクラスを追加したいと思います！

Answer 1

jQueryの.addClass() functionは、引数としてコールバック関数を受け入れることができます。この場合、そのコールバックはjQueryオブジェクトの要素ごとに1回呼び出されます。コールバックは現在の要素のインデックスを引数として受け取り、コールバックから返される文字列値はその要素に追加するクラスの名前にする必要があります。

要素のインデックスは0から始まり、もちろん、あなたがしたいクラス名を取得するには、各インデックスに1を追加することができます：あなたがループにjQueryのに各機能を使用することができます

$(".z-title").addClass(function(i) { return "tab" + (i + 1) })

.tab1 { color: red; } 
 
.tab2 { color: blue; } 
 
.tab3 { color: green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<span class="z-title">Hello</span> 
 
<span class="z-title">Hello</span> 
 
<span class="z-title">Hello</span>

Answer 2

クラス名が「z-title」のすべての要素を介してインデックス値をインクリメントしてクラスを追加すると、コードは次のようになります。

$(".z-title").each(function(index){ 
    $(this).addClass('tab'+(index+1)); 
    })