Question

我问了一个类似的问题，但后来取得了很多进展，所以我想分享它。

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

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

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

我在这里创建了一个小提琴Fiddle如果单击“保存模板”，您将看到会发生什么。 id号看起来很奇怪，例如textareaInput222。实际上，每个元素类型应该从0开始，并且为相同类型的每个附加元素添加1个。

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

我怎样才能做到这一点？

由于

Answer 1

我个人使用了underscore.js的唯一id函数，或者你自己的实现，并在页面上添加了像“dateInput-345”这样的唯一编号的后缀。即使只是使用一个计数器变量，所有使用它都很容易，而不是基于循环中的索引。

http://underscorejs.org/#uniqueId

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

(index + 1)

你可以使用像

这样的东西

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

然后当你需要一个id：

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

请确保您没有复制已添加号码的ID，或者您也需要处理它。

Answer 2

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

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

我的朋友，这两个都是原因。大约有6个.form-group元素，因此textarea＃每次运行6次。关于干，我在这里给了我的版本https://jsfiddle.net/yjaL2zgL/2/

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

2 个答案: