在 Javascript 中克隆一行时增加元素 ID答案

【问题标题】：Increment element Id upon cloning a row in Javascript在 Javascript 中克隆一行时增加元素 ID
【发布时间】：2016-09-12 19:41:11
【问题描述】：

我有一个 HTML 页面，其中一行有 2 个下拉元素和一个文本输入元素。我添加了一个按钮来成功克隆这一行。我为动作 POST 添加了另一个按钮，以将所有下拉列表和文本输入值推送到数据库。这里的问题是在克隆时，行中元素的 Id 也被克隆了 - 所以我无法获取值。

我的 HTML 代码：

    <div class="rule">
                 <div class="form-group">

                   <div class="col-md-3 col-sm-3 col-xs-3">
                    <select class="form-control" name="condition" id="condition">
                    <option value="">Choose Sensor</option>
                     <option>1</option>
                      <option>2</option>
                      <option>3</option>
                    </select>
                  </div>


                  <div class="col-md-3 col-sm-3 col-xs-3">
                    <select class="form-control" name="paraop" id="paraop">
                      <option>Choose Condition</option>
                      <option>Equal to</option>
                      <option>Less than</option>
                      <option>Greater than</option>
                    </select>
                  </div>

                  <div class="col-md-3 col-sm-3 col-xs-3">
                   <input type="text" required="true" placeholder="Value..." class="form-control"  name="value" id="value">
                  </div>
                </div>

                 <div class="rule-options">
                <a href="#" class="add-rule-btn"><i class="fa fa-plus-circle"></i></a>
                <a href="#" class="remove-rule-btn"><i class="fa fa-times-circle"></i></a>
                </div>
                </div>

克隆的元素是“condition”、“paraop”和“value”。

要克隆的Javascript代码：

      handleAddRule: function() {

      var _self = this;

    $('.add-rule-btn').live('click', function() {
      var parentRuleGroup = $(this).parents('.rule');
      var newRule = $('.rule:first').clone();

     newRule.insertAfter($(this).parents('.rule'));

      return false;
    });
  },

我正在考虑每次按下添加按钮时增加元素 ID - 所以我可以轻松地通过 POST php 文件中的 ID 获取元素。但是我怎样才能增加 Id 值呢？或者还有其他方法可以从 POST 页面检索元素吗？

【问题讨论】：

你需要获取什么值，你是怎么做的？显示相关代码。选择元素的方法不计其数，因此最简单的解决方案可能是首先不要在要克隆的子树中使用任何 id。
你的问题太模糊了，请突出你问题的相关部分，你想获取和增加哪些id？您想在 POST 页面上检索哪些 id？
我要检索的 Id 是“条件”、“paraop”和“值”（以及它们的克隆）
你想重复“条件”、“paraop”和“值”。当单击添加按钮和删除按钮时，它应该被删除吗？
这里是它的例子jsfiddle.net/j08691/gS8u2/1/embedded/result

标签： javascript jquery html

【解决方案1】：

让这个工作。我所需要的只是 javascript 中的这个附加块，它将找到输入并将递增的数字附加到它。

count++;
 newRule.find(':input').attr('id', function(i, val) {
        return val + count;
    });

根据这里对这个问题的回答 Clone form and increment ID

【讨论】：