Jquery 按顺序向DOM添加各种对象

我已经了解了如何通过此处将同一对象顺序添加到DOM中-

我的问题有点复杂，因为我有各种表单模板供用户选择。当选择其中一个模板时，事件会将新对象追加到数据库中，然后通过id（color_1、color_2、color_3、color_4、color_5）将其添加到数据库中

前

“最多可选择五种颜色” 对象模板有三种主要颜色，每种颜色都有三种色调： 红色（蔓越莓、栗色、猩红色） 格林（亨特、杰德、凯利） 蓝色（海军蓝、皇家蓝、长春花）

例如，表单和红色模板如下所示：

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

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

蔓越莓
褐红色的
猩红

绿色前
蓝色前任

JQuery如下所示：

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

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

$（文档）.ready（函数（）{
$（'.add red'）。单击（函数（e）{
e、 预防默认值（）；
$（“.red模板”）
.clone（）
.show（）
.removeClass（“红色模板”）
.addClass（“红色”+i）
.appendTo（“.color container”）；
});
$（“红色阴影”）
.removeClass（“红色阴影”）
.addClass（“阴影”+i）；
});
});

对于蓝色和绿色，我有相同的HTML和JQuery。如果添加了红色模板，我需要将div class=“red template”更改为class=“red\u 1”，然后将class=“red shade”更改为class=“shade\u 1”。如果选择了另一种红色，“红色2”和“阴影2”

我认为以下措施应该有效：

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

---

for（i=1；i发布提琴会帮助我们，帮助你。目前，我们只是猜测你的问题可能是什么。正如@Neil提到的，你的代码错误地使用了id（对于初学者）

我在这里做了一把小提琴，看看这是否就是你想要的：

在回答您的问题时，您可能会进入以下模块：

$(document).ready(function () {
      $('select.input-medium').on('change', function (e) {
          e.preventDefault();

         ***here***
      });
  });

您应该只有一个具有唯一ID的元素。您应该使用一个颜色类而不是ID。此外，您不能在任何一个元素上有多个ID，因此，同样，您应该为color_1等使用类。很抱歉造成混淆。我从未使用过JSFIDLE，这应该可以帮助我更好地解释我试图实现的目标。我需要按顺序计算我添加的每个对象。这是我最近一次迭代的一把小提琴-Hi@csakon你的小提琴上有一个语法错误，我修复了它并显示了正在添加的项目的计数器。让我知道这是你想要的还是我没有走上正确的轨道：）