Javascript JQuery替换字符串中的元素

我有一个包含HTML数据的字符串，例如：

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

接下来，您可以看到两个输入元素的id都是dateInput。我现在需要做的是改变这个值，使它是唯一的，使用类似递增的数字。因此，第一个输入应该是dateInput1，第二个是dateInput2

我怎样才能做到这一点？如果可能，最好将标签中的for值更改为与id匹配

谢谢

更新

如果我这样做：

$("#content").find(".form-group").each(function() {
        var html = $(this).attr('class', 'form-group')[0].outerHTML.replace(/ data-(.+)="(.+)"/g, "");
        $(this).find('input[type="text"]').attr('id', this.id+$(this).index()+1);

        dataArray.push(html);
    });

---

它似乎没有更新。这里有一个fiddle示例

您可以使用jQuery计算字符串，以便将其作为DOM树导航：

var string = "<div><span>Hello</span></div>";
var $parsedDom = $(string);
$parsedDom.children(); // => <span>Hello</span>

---

最后，为了删除以“data-”开头的每个属性，您应该循环每个

输入
id
等于
dateInput
，然后附加到其旧值
索引
+1（因为它是零基的）

使用
.index（）
在每个循环中获取唯一的编号：

$("#content").find(".form-group").each(function() {
    // other code

     $(this).find('input[type="text"])
                 .attr('id', this.id+$(this).index()+1);

 });

谢谢我已经做了一个更新显示我的问题，并链接到小提琴
$("#content").find(".form-group").each(function(index) {

    //$(this).attr('class', 'form-group') has no effect:
    // you have already found the nodes with this class

   // removing the "data-" (why?)
   $(this).removeAttr("data-type");

   //modifing the id
   var $thisInput = $(this).find('input');
   var oldId = $thisInput.attr('id');
   $thisInput.attr('id', oldId + index);
});

$("input[id='dateInput']").each(function(index, value) {
    var old_id = $(value).attr("id");
    var new_id = old_id + (index + 1);
    $(value).attr("id", new_id);
});

$("#content").find(".form-group").each(function() {
    // other code

     $(this).find('input[type="text"])
                 .attr('id', this.id+$(this).index()+1);

 });