使用 jQuery 更改 HTMLDivElement 中的所有 id

Change all id's in HTMLDivElement using jQuery

本文关键字：id jQuery 更改 HTMLDivElement 使用      更新时间：2023-09-26

我正在使用jQuery来动态附加Django表单集。

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

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

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

这能行吗？

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

小提琴

更新

您好，ev.preventDefault 仅用于防止锚点的默认行为。它阻止元素的默认操作发生。

我看到了你的html，这里有一个新的小提琴

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
});

希望对您有所帮助。

亲切问候。

相反，您可以使用 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，我们必须克隆最新添加的元素。

希望这有帮助！

干杯

我可以使用正则表达式基本上找到"cur-''d"的每个出现。

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

  1. 选择所有标签标签元素，其中 for 属性以 id-cur- 开头 

    $("label[@for^=id-cur-]")

  2. 选择所有 id 以 id-cur- 开头的输入标签元素 

    $("input[@id^=id-cur-]")

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

相关文章：