jQuery 要素を順番に処理する

Question

問い）
要素を順番に処理してみよう！
Classが「name」の要素を全て取得して、中身を次のように書き換えてみましょう。

pタグの中に「Johnny + 0から始まる繰り返した数」という名前を入れる。

という問題についてなのですが、
以下のように記述しましたがうまくいきません。

$selected = $(".name ").each(function(index, element) {
      $(element).html('<p>Johnny0</p>')
 });

class=nameの要素が合計5つ取得できること」はクリアしましたが、
「中身が'p'タグで名前が順番に'Johnny0, Johnn1...となること」がクリアできずにおります。
出力が、全てJohnny０になってしまいます。

どなたか、どの部分が誤りであるか、また正しい書き方を教えていただけないでしょうか。
よろしくお願いいたします。

Answer 1

indexを活用してください

<script>
$(function(){
  $(".name ").each(function(index, element) {
    $(element).html('<p>Johnny'+index+'</p>');
  });
});
</script>
<div class="name">test</div>
<div class="name">test</div>
<div class="name">test</div>
<div class="notname">dummy</div>
<div class="name">test</div>
<div class="name">test</div>

Comments

[mirk]

早速のご返事ありがとうございました！！
無事解決することができました。