javascript - JQuery改变元素的id属性

Question

我有一个使用克隆的拖放工具。由于日期选择器，我在日期克隆方面遇到了问题。因此，我需要确保每个克隆的日期选择器都有一个唯一的 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

尝试使用 在 submit 外部定义 dataArray、i 事件、.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 https://jsfiddle.net/mLgrfzaL/2/