Question

我有一个使用克隆的拖放操作。因为datepicker，我遇到了日期克隆的问题。因此，我需要确保每个克隆的datepicker都有一个唯一的id。克隆元素如下所示

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

因此，如果我克隆两个日期输入，我将有两个以上。现在提交，我清理所有克隆的html，做一些事情，比如删除数据类型。在这个阶段，如果有克隆日期输入，我需要给它一个唯一的ID。目前我正在这样做

$("#content").find(".form-group").each(function() {
    var html = $(this).attr('class', 'form-group')[0].outerHTML.replace(/ data-(.+)="(.+)"/g, "");
    var input = $(this).find('input');
    var i = 0;
    if(input.attr('id') == 'dateInput') {
        alert("TEST");
        input.attr("id",'dateInput' + i).datepicker();
        i++;
    }
    console.log(html);
    dataArray.push(html);
});

如果克隆2个日期输入，TEST警报会触发两次。但是，当我将html输出到控制台时，id属性似乎没有改变。我已经设置了以下Fiddle来证明元素的id没有改变。

任何有关改变此事的建议都会受到赞赏。

由于

Answer 1

尝试使用dataArray，i，submit定义.each()，.map()外.get()事件，.attr(function() {index, attr})， .outerHTML

$(function() {
    // define `i` , `dataArray`
    var i = 0, dataArray = [];
    $('#content').submit(function(event) {
        event.preventDefault();
        $("#content").find(".form-group").each(function() {
          var html = $(this).attr('class', '.form-group')[0]
                     .outerHTML.replace(/ data-(.+)="(.+)"/g, "");
          dataArray.push($(html).map(function(_, el) {   
            // adjust `input` `id` here , return `input` as string 
            return $(el).find("input").attr("id", function(_, id) {
              return id + (++i)                
            })[0].outerHTML
          }).get()[0])
        });   
        $("#output")[0].textContent = dataArray.join(" ");
        console.log(dataArray)
    });
});

jsfiddle http://memcached.org/about

JQuery更改元素的id属性

1 个答案: