需要遍历 HTML 表单中的 id 并更改值答案

【问题标题】：Need to iterate through id's in an HTML form and change values需要遍历 HTML 表单中的 id 并更改值
【发布时间】：2013-03-07 17:00:00
【问题描述】：

我有一个表格，为了这个论坛，我已经简化了：

<form id="data0">
    <input id="name0" />
    <input id="address0" />
</form>

使用 jQuery 我需要 clone() 这个然后将克隆表单的 id 更改为 name1、address1 等。

有没有办法做到这一点而无需单独更改它们：

$('#data0').children('#name0').attr('id', 'name1');

就像遍历所有输入并将“0”更改为“1”一样。谢谢。

【问题讨论】：

尝试类似 $('form input').each(function(ind,elem){elem.attr('id',elem.attr('id').replace(/0/ ,1))});
你是如何追加/克隆它们的？
页面布局开始是这样的：<form></form><button you click to add a new form></button>，我希望它在按钮之前插入新表单。
jsfiddle.net/kq5jq 这是他们想要的功能，但我需要更改更多 ID。

标签： jquery html clone

【解决方案1】：

您将首先使用 jQuery 中的 .clone() api 来克隆 #data0 表单。然后迭代表单内部的输入元素，替换id并清除值，包括表单id。之后，将新表格放置到正文中。因此，您应该有一个计数器，用于在单击添加按钮时增加表单 ID。

以下示例使用data0 表单作为克隆新表单的基础。

HTML

<input type="button" value="Add form" id="addBtn"/>

<form id="data0">
    <input id="name0" />
    <input id="address0" />
</form>

JavaScript

function ReplaceID(element, suffix) {
 var newId = $(element).attr('id').replace(/0/,suffix);
 $(element).attr('id', newId);
 $(element).val(newId); // for demo use, change to '' to reset value
}
var formNewId = 1;
$("#addBtn").on('click', function(){
    var newForm = $("#data0").clone();
    $('input', newForm).each(function(index,element){ // iterate input element inside the form
        ReplaceID(this, formNewId); // replace id

    }); 
    ReplaceID(newForm, formNewId); // replace the id of cloned form
    $("body").append(newForm);
    formNewId++;
});

工作示例：http://jsfiddle.net/TfDUE/1/

【讨论】：

我比较懒，只是简单的参数名。应该是function(index, element)api.jquery.com/each
谢谢你的帮助，德里克。经过一些调整后，我让它在我的项目中完美运行。

【解决方案2】：

像这个例子一样使用：

<form id="old">
    <textarea>Some Value</textarea>
    <input type="text" value="Some Value" />
    <input type="checkbox" value="bob" checked />
    <br />
</form>

<input type="button" value="Clone" id="clone" />

这个 jQuery 可以工作，包括 textareas：

$( 'input#clone' ).click(
    function()
    {
      $( 'form#old textarea' ).text( $( 'form#old textarea' ).val() )
      $("form#old").clone().attr( 'id', 'new_form' ).appendTo("body")

    }

  );

【讨论】：

【解决方案3】：

这是解决方案只需取出console.log 和alert ：

$(":input").each(function() { //get all inputs

newId = $(this).attr('id');

   $(this).attr('id', newId.replace('0', '1')); 
    console.log($(this).attr('id'));
    alert($(this).attr('id'));
});

http://jsfiddle.net/yKZPK/

【讨论】：