jquery - さまざまなオブジェクトを順番に DOM に追加する

Question

ここで同じオブジェクトを順番に DOM に追加する方法を見てきました - http://webdesignerwall.com/tutorials/jquery-sequential-list/comment-page-6

ユーザーが選択できるさまざまなフォーム テンプレートがあるという点で、私の問題はもう少し複雑です。これらのテンプレートのいずれかが選択されると、イベントによって新しいオブジェクトが追加され、id(color_1、color_2、color_3、color_4、color_5) によってデータベースに追加されます。

元。

「最大 5 つの色を選択してください」 オブジェクト テンプレートは 3 つの主要な色であり、それぞれにその色の 3 つの色合いを選択できます。

たとえば、フォームと赤のテンプレートは次のようになります。

<div class="color-container"></div>
<form action='/colors' method='post' class="form-horizontal">
<div class="red-template">      
   <p>
      <select class="red-shade input-medium">
        <option>cranberry</option>
        <option>maroon</option>
        <option>scarlet</option>
      </select>
   </p>
</div>
<div class="green-template">Green Ex</div>
<div class="blue-template">Blue Ex</div>

JQuery は次のようになります。

<script>
  $(document).ready(function() {
    $('.add-red').click(function(e) {
  e.preventDefault();

    $(".red-template")
      .clone()
      .show()
      .removeClass("red-template")
      .addClass("red_" + i)
      .appendTo(".color-container");
    });

    $(".red-shade")
      .removeClass(".red-shade")
      .addClass("shade_" + i);
    });

 });
</script>

青と緑には同じ HTML と JQuery があります。赤のテンプレートが追加された場合、div class="red-template" を class="red_1" に変更し、次に class="red-shade" を class="shade_1" に変更する必要があります。別の赤を選択した場合は、「red_2」と「shade_2」。

私は以下がうまくいくはずだと信じています：

for(i=1;i<=5;i++) {
$('.red-template').attr('class', 'red_' + i);
}

しかし、このコードをどこに配置すればよいかわかりません。$(document) の直後に配置すると、クリック イベントを待ちません。$('.add-red') の後に配置すると、連続しなくなります。