Question

我正在使用jQuery动态附加Django formset。

我使用链接添加另一个与上面相同的表单。我使用以下代码执行此操作：

var row = $("."+class_name).first().clone(true);
row.find('input').val('');
$(row).removeAttr('id').hide().insertAfter("."+class_name).last().slideDown(300);

row [0]中的每个标签（HTMLDivElement）都是id_cur-0 -...每次我使用这个jQuery函数添加div时，我需要每个id在cur之后递增数字。所以我第一次点击它时每个项目都会有id_cur-1 ......下次他们会有id_cur-2 ......等等。

如果我可以将HTMLDivElement视为一个字符串，我可以使用正则表达式基本上找到“cur- \ d”的每一个出现。我该怎么做？或者有更好的方法（因为这种看起来像是黑客）。

以下是我的HTML的样子：

<div class="item1">
  <label style="display:inline-block;" for="id_cur-0-cur_child_name">
    Name:
  </label>
  <input style="display:inline-block;width:10%" class="textinput textInput form-control" id="id_cur-0-cur_child_name" name="cur-0-cur_child_name" type="text" />

  <label style="display:inline-block;" for="id_cur-0-cur_child_sex">
    Sex:
  </label>
  <input style="display:inline-block;width:10%" class="textinput textInput form-control" id="id_cur-0-cur_child_sex" name="cur-0-cur_child_sex" type="text" placeholder="[M / F]" />

  <label style="display:inline-block;" for="id_cur-0-cur_child_dob">
    DOB:
  </label>
  <input style="display:inline-block;width:10%" class="textinput textInput form-control" id="id_cur-0-cur_child_dob" name="cur-0-cur_child_dob" type="text" placeholder="e.g. 12/25/2014" />
</div>

Answer 1

这会吗？

var last_id = $("."+class_name).last().attr("id").split("-")[1];

fiddle

<强>更新

您好，ev.preventDefault仅用于防止锚的默认行为。它会停止元素的默认操作。

我看到了你的HTML，这里有一个新的fiddle

Javascript代码（已评论）：

$("#clone").click(function (ev) {
    ev.preventDefault();

    var row = $(".item1").last().clone(true);// Last item1
    var last_id = $(row).find("input:first").attr("id");// Grab first input id (it contains the important part: the number)
    row.find('input').val('');

    $.each(row.find('input'), function (index, item) {// Change id of all inputs inside the cloned element.
        var id = (+(last_id.split("-")[1])+1), // Grab the number and increase it.
            new_id = $(item).attr("id").replace("id_cur-" + last_id.split("-")[1], "id_cur-" + id);// Replace ids with the new number.
        $(item).attr("id",new_id);// Asign the new id to the inputs. You'll have to do more or less the same to the labels if you like.
    });
    $(row).removeAttr('id').hide().insertAfter(".item1:last").slideDown(300);// Insert after the last item1 element. Otherwise it'll insert after all elements with class .item1

});

希望它有所帮助。

亲切的问候。

Answer 2

相反，您可以使用id_cur作为类名，并使用具有id属性的特定ID：

var last_row = $("."+class_name+":last");
var new_row = last_row.clone(true);

new_row.attr('id', new_row.attr('id')+1);
new_row.find('input').val('');
new_row.removeAttr('id').hide().insertAfter(last_row)
new_row.slideDown(300);

您只需要使用最后一个+ 1增加id属性。

只是为了澄清：您使用first（）来选择第一个匹配的元素并在var row = $("."+class_name).first().clone(true);中克隆它，但在这种情况下，如果我们想要相应地增加id，我们必须克隆添加的最新元素

希望这有帮助！

干杯，

Answer 3

我可以使用正则表达式基本上找到＆＃34; cur- \ d＆＃34;。

的每一次出现。

使用JQuery正则表达式选择器查找所有id或任何attr。

选择for属性以id-cur-
开头的所有label标签元素
```
$("label[@for^=id-cur-]")
```
选择ID为id-cur-
的所有输入标记元素
```
$("input[@id^=id-cur-]")
```

希望这可能有助于用正则表达式选择dom元素。

使用jQuery更改HTMLDivElement中的所有id

3 个答案: