jQuery-修改多個克隆元素的屬性

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。 目前，我有一個部分解決方案。

我在這里創建了一個小提琴。如果您單擊“保存模板”，您將看到會發生什么。 標識號看起來很奇怪，例如textareaInput222。 實際上，每種元素類型都應從0開始，並為同一類型的每個其他元素添加1。

這可能嗎？ 我正在努力解決的另一件事是將屬性的元素標簽設置為與為該元素設置的名稱相同。

我該如何實現？

謝謝

Answer 1

我將親自使用underscore.js的唯一id函數，或您自己的實現，並在頁面上給每個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＃each運行了6次。 關於DRY，在這里我給了我的版本https://jsfiddle.net/yjaL2zgL/2/