Question

我有一个包含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>

在假设我正在使用DOM之前，我问了这个问题。但是，这只是一个字符串。我要做的第一件事是从字符串中删除data属性：

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

接下来，您可以看到两个输入元素的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);
    });

似乎没有更新。我在这里有一个例子https://jsfiddle.net/mLgrfzaL/4/

Answer 1

您可以使用jQuery来评估字符串，以便将其导航为DOM树：

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

在您的情况下，我不清楚您想要应用它的位置。

回答您的其他问题：

$("#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);
});

最终，您可以loop on element attribute删除以“data - ”开头的每个属性。

Answer 2

您应循环每个input id等于dateInput，然后追加到旧值index + 1（因为它从零开始）。

$("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);
});

Answer 3

使用.index()在每个循环中获取唯一编号：

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

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

 });

JQuery替换字符串中的元素

3 个答案: