在Javascript中克隆一行时增加元素Id

时间:2016-09-08 09:20:53

标签: javascript jquery html html5

我有一个HTML页面,其中一行有2个下拉元素和一个文本输入元素。我添加了一个按钮来成功克隆此行。我为操作POST添加了另一个按钮,将所有下拉列表和textinput值推送到数据库。这里的问题是克隆时,行中元素的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>

克隆的元素是“条件”,“副作用”和“价值”。

要克隆的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文件中的ID轻松地获取元素。但是我怎样才能增加Id值?或者有没有其他方法从POST页面检索元素?

1 个答案:

答案 0 :(得分:0)

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

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

基于这个问题的答案 Clone form and increment ID