JQueryで指定個数分のhtml追加方法

Question

表題の通りなのですが、
スライドするコンテンツをクリックすると、それぞれ適したモーダルコンテンツを表示したく、
その前準備として、スライド数を取得し、その数だけモーダルのdivを追加していきたいです。

        $(this).attr('id','number' + (i+1));
    });
    
    $('.slider a').click(function(){
        var howMany = $('.slider a').index();
        
        $('body').append('<div class="modal"></div>' * howMany);
        
    });
コード

一旦、スライドごとに連番でidを振るところまででき、（後々モーダルコンテンツと紐付け予定）
あとはスライドの数をindex()を使って取得する（howMany）ことろまできました。

あとは、このhowManyの数だけ、'<div class="modal"></div>'をbodyに追加していきたいです。

まだまだJQuery初心者なので、文法的にあっているかも含めて、御指南のほど、宜しくお願い致します。

Answer 1

var howMany = $('.slider a').index();

これはエラーになります。
index(subject) - jQuery 日本語リファレンス

index(subject)
jQueryオブジェクト内で、引数で指定されたエレメントのインデックス番号を返す。インデックスは、ゼロから始まる連番。
もし渡されたエレメントがjQueryオブジェクト内に存在しない場合、戻り値には-1が返る。

引数なしでindex()を呼び出すのはできません。

$('body').append('<div class="modal"></div>' * howMany);

「'<div class="modal"></div>' * howMany」の計算結果はNaNです。
特定の数だけ要素を追加したいなら普通にループしましょう。

for( var i = 0; i < 10; i++ ){
  $('body').append('<div class="modal"></div>');
}

Comments

[misoshiru-yuzu]

早速の回答、ありがとうございます！