Javascript JQuery-修改多个克隆元素的属性

我问了一个类似的问题，但后来取得了很大进展，所以我想与大家分享

基本上，我有可以拖放的表单元素——它利用了克隆。它允许我创建自己的表单。问题是，输出可能是这样的

<form id="content">

  <div data-type="text" class="form-group">
    <label class="control-label col-sm-5" for="text_input">Text Input</label>
    <div class="controls col-sm-7">
      <input type="text" name="text_input" class="form-control" id="text_input">
    </div>
  </div>

  <div data-type="text" class="form-group">
    <label class="control-label col-sm-5" for="text_input">Text Input</label>
    <div class="controls col-sm-7">
      <input type="text" name="text_input" class="form-control" id="text_input">
    </div>
  </div>

  <div data-type="textarea" class="form-group">
    <label class="col-sm-5 control-label green" for="textareaInput">Text Area:</label>
    <div class="controls col-sm-7">
      <textarea cols="50" name="textareaInput" id="textareaInput" class="form-control" rows="5"></textarea>
    </div>
  </div>

  <div data-type="textarea" class="form-group">
    <label class="col-sm-5 control-label green" for="textareaInput">Text Area:</label>
    <div class="controls col-sm-7">
      <textarea cols="50" name="textareaInput" id="textareaInput" class="form-control" rows="5"></textarea>
    </div>
  </div>

  <div data-type="date" class="form-group">
    <label class="control-label col-sm-5" for="dateInput">Date Input:</label>
    <div class="col-sm-3">
      <input type="text" name="dateInput" class="form-control date_picker" id="dateInput">
    </div>
  </div>

  <div data-type="date" class="form-group">
    <label class="control-label col-sm-5" for="dateInput">Date Input:</label>
    <div class="col-sm-3">
      <input type="text" name="dateInput" class="form-control date_picker" id="dateInput">
    </div>
  </div>

  <input type="submit" value="Save Template" id="templateSubmit" class="btn btn-primary">
</form>

文本输入
文本输入
文本区：
文本区：
日期输入：
日期输入：

问题是，如果我克隆了两个相同类型的表单元素，它们都具有相同的名称和id，如上图所示。所以我需要确保每个克隆的元素都有唯一的名称和id。目前，我有一个部分解决方案

我在这里创建了一个提琴，如果您单击SaveTemplate，您将看到发生了什么。id号看起来很奇怪，例如textareaInput222。实际上，每个元素类型都应该从0开始，并且对于相同类型的每个附加元素，都应该向其中添加1

这可能吗？另一件我正在努力解决的事情是将属性的元素标签设置为与为该元素设置的名称相同

我怎样才能做到这一点

---

谢谢

我会亲自使用下划线.js的unique id函数，或者使用您自己的实现，并在页面上为每个id添加一个唯一的后缀，该后缀的增量类似于“dateInput-345”。即使只是使用一个所有东西都使用的计数器变量也很容易，而不是基于循环中的索引

您自己的柜台： 而不是使用

(index + 1)

你可以用像

var uid = 0; //this needs to be where you declared your other vars

然后，当您需要id时：

var new_id = $(value).attr("id") + '-' + uid++;

只要确保你没有复制一个已经附加了号码的id，否则你也需要处理这个问题

$("#content").find(".form-group").each(function() {

$("textarea").each(function(index, value) {

---

我的朋友，这两个都是原因。大约有6.formgroup元素，因此textarea#每个元素运行6次。关于DRY，我在这里给出了我的版本

谢谢。我现在正在使用一个计数器，但在使用它时遇到了一些困难。谢谢，它工作得很好。有没有办法让标签的for属性与输入id相同？Thanks@kate_hudson当然，您已经获得了设置的方法：输入元素id。对于label，这是相同的，在更新输入的id时，查找label元素（例如jquery prev（）方法）并更新其id。我正在尝试alert（$elem.closest（'div'）。查找（'label'）.html（））；在循环中，但它返回undefinedcoz$elem。最近（'div'）是div.controls，它是label的同级。试试$elem.closest（'.FormGroup'）。查找（'label'）@kate_hudson