javascript - 在 for 循环中克隆

Question

我有一行文本框，我有一个函数可以根据函数中的数字来克隆它们。因此，如果将有 4 个用户，那么我希望该行克隆 4 次以输入 4 个用户的信息。但我也想要某种方式能够提交此表单，我无法弄清楚如何为每个文本框的每一行指定一个唯一的类或 ID，以便我可以在提交时通读它们。

我在考虑将“1”添加到第一行中的所有内容的每个类(或 ID)，然后将“2”添加到第二行中的所有内容。但我不太确定如何做到这一点。我有一个例子 Here In jsFiddle ，因为我尝试添加 for 循环并克隆了一定次数，现在克隆甚至根本无法工作 - 如果有人有任何建议，它真的会帮助我。

<div class="RegisterContainer">
  <div class="RegisterHead"><a>Register Attendees</a></div>
    <div class="placenewrows"></div>
</div>
<br />
<input type="button" onclick="fnCloneTemplate({'number' : '3'});" value="make 3 rows">

<div class="_template">
  <a class="left1">First Name:</a>
  <a class="left2"></a><a class="left2">Last Name:</a>
  <a class="left3">Phone #</a><a class="left4">Email:</a>
  <a class="left5">Optional Comment</a><br />
  <input type="text" class="tFirstName left1"/>
  <input type="text" class="tLastName left2"/>
  <div class="phonenumberbox left3">
    <input type="text" class="first3digits" maxlength="3" />
    <a style="position:relative;top:-1px;">-</a>
    <input type="text" class="next3digits" maxlength="3" />
    <a style="position:relative;top:-1px;">-</a>
    <input type="text" class="last4digits" maxlength="4" />
 </div>                                                                                              <input type="text" class="tEmail left4"/>   

function fnCloneTemplate(x){
    var NumofClones = (x.number * 1);
    for(i=0; i <= NumofClones; i++)
    {
       var newrow = $('._template').clone().removeclass('_template');
        $('.placenewrows').append(newrow);
    }    
}

Answer 1

您的代码中有错别字:

var newrow = $('._template').clone().removeclass('_template');
                                     //----^

removeclass 应该是 removeClass。

http://jsfiddle.net/y543n/

此外，您还没有在 fiddle 中加载 jQuery，那里存在范围问题，您使用的是 HTML onclick 属性，并且未定义该上下文中的函数。您可以改用 jQuery click 方法:

$('input[type=button]').click(function(e){
   e.preventDefault();
   // ....
})

---

$('input[type=button]').click(function(e) {
    var numofClones = 3;
    e.preventDefault();
    var b = $('.placenewrows input[type=text]').length;
    var newrow = $('._template').clone().removeClass('_template').find('input[type=text]').addClass(function(i, cur) {
            return 'something' + ++b
    }).end()
    for (i = 0; i < numofClones; i++) {
        $('.placenewrows').append(newrow);
    }
})​

http://jsfiddle.net/bgCXX/