正确地重命名克隆输入JQuery

时间:2015-11-07 22:06:16

标签: javascript jquery html

我正在尝试创建自己的克隆函数来更改克隆输入的名称,以便PHP可以收集它们。

在W3C上我发现了这个简单的函数来构建

$("button").click(function(){
$("p").clone().appendTo("body");
});

我修改它以克隆具有多个输入的字段集,并且它有效。我更进一步尝试将其重命名并整数化不同输入元素的name属性,现在它甚至不克隆该字段。

这是我到目前为止所拥有的。

$("#p20_01_yes").click(function(){
var num     = $('.clonedInput').length,
newNum  = new Number(num + 1);
$("#cloner").clone($("input, textarea, select").each().attr('name'+newNum)).appendTo("#page20");
});

我只是试图发布HTML的片段,但我收到一条警告,告诉我限制是30,000个字符所以这里是一个显示所有内容的小提琴。

https://jsfiddle.net/Optiq/krjztsm2/

我按照我的方式构建了JQuery,因为我认为在克隆函数内部重命名然后将结果附加到页面而不是附加它然后返回并将其与其他所有内容分开来更合适回过头来......认为这对计算机更有意义。这是看待它的正确方法吗?

1 个答案:

答案 0 :(得分:1)

你已经非常接近了。我不确定我的答案是否能完美运行(看到JSFiddle非常混乱),但你可以随后调整类和ID。

您只需将任务分为两部分:

  1. 克隆字段集
  2. 更新输入元素名称(以及可能还有ID?)
  3. 以下是一个如何运作的示例:

    $("#p20_01_yes").click(function(){
        var num = $('.clonedInput').length,
        newNum = new Number(num + 1);
        var $clonedFieldset = $("#cloner").clone().appendTo("#page20");
        $clonedFieldset.find("input, textarea, select ").each(function() {
            var $item = $(this);
            $item.attr('name', $item.attr('name') + newNum);
        });
    });