0

1) 序言。我有一个链接可以触发一个 jQuery 方法来克隆一个包含一堆选择器的 div，所有这些都在表单中。

2）html代码：

<a href="" id="cloneMethod">Fire</a>

<form method="post" action="">
      <div class="colneDivs">
        <input type="text" name="1"/>
        <input type="text" name="2"/>
        <select name="3"></select>
        <textarea rows="3" cols="5" name="4"/>
        <input type="text" name="5"/>
        < ... and so on .../>
     </div>
</form>

3）脚本：

var iLast, nrCamp, cat, temp, cateCampuri;
$('#cloneMethod').on('click', function(){
    $('.cloneDivs:last').clone().insertAfter('.cloneDivs:last');
    iLast = $('.cloneDivs:last').find('input:last');      
    nrCamp = parseInt(iLast.attr('name'))+1;
    modiNume(nrCamp);
});

function modiNume(cat){
    temp = $('.cloneDivs:last');
    cateCampuri = temp.length;
    for(i=0; i < cateCampuri; ++i ) {
        temp.eq(i).attr('name',cat+i);
    }
}

4) 问题。

a) 任何想法：

iLast = $('.cloneDivs:last').find('input:last');

改变：

.find('input:last');

一般情况下，例如：

.find('*:last');

我尝试：

.find('*').last()

它不起作用。

b）我想自动更改选择器名称和这部分：

for(i=0; i < cateCampuri; ++i ) {
        temp.eq(i).attr('name',cat+i);
    }

from 方法 modiNume 不起作用。所以任何想法都会受到赞赏。

编辑：我在这里做了一个 jsFiddle：http: //jsfiddle.net/JC4dv/1/

4

2 回答 2

2

没有自动重命名功能。我建议你设置一个像 txtname_0、txtDesc_0 这样的 Id。并使用以下代码克隆

<a href="#" id="cloneMethod">Fire</a>
  <div class="colneDivs">
    <input type="text" id="txtName_0"/>
    <input type="text" id="txtId_0"/>
    <select id="txtSelect_0"></select>
    <textarea rows="3" cols="5" id="txtDesc_0"/>
    <input type="text" id="txtTest_0"/>
 </div>

和jQuery代码：

$('#cloneMethod').on('click', function(e){
 e.preventDefault();
var clonedHtml = $('.colneDivs:last').clone(true, true).get(0);
 var newId = $('.colneDivs').length;
    console.log(newId);
 $(clonedHtml).find("*").each(function(index, element) {
     if (element.id || element.name) {
         var matches = element.id.match( /(.+)_\d+/ );
         if (matches && matches.length >= 2) {
             var splitedId = matches[1].split('_');
             var elementId = splitedId[splitedId.length - 1];
             element.id = elementId + "_" + newId;
         }
         if (element.name) {
             element.name = element.id;
         }
     }
 });
$(clonedHtml).insertAfter('.colneDivs:last');
});

如果小提琴链接在这里

http://jsfiddle.net/kn4ZF/

于 2013-08-14T07:03:52.117 回答
0

1 小时后，根据@Rajesh Kumar 的提示，我简化了问题，并得到了以下完整的工作代码：

html代码：

<button id="cloneMethod">Fire</button>
<div class="colneDivs">
    <input type="text" name="a1" value="a1"/>
    <input type="text" name="b1" value="b1"/>
    <input type="text" name="c1" value="c1"/>
</div>

jQuery脚本代码：

$('#cloneMethod').on('click', function () {
 $('.colneDivs:last').clone().insertAfter('.colneDivs:last');
 var nrCamp = $('.colneDivs').length;
 $('.colneDivs:last').children().each(function(){
     $(this).attr('name', $(this).attr('name').substr(0,1)+nrCamp);
     $(this).val($(this).attr('name').substr(0,1)+nrCamp); // this must be removed. It is just for easing verify process...
 });
});

jsFiddle在这里：http: //jsfiddle.net/JC4dv/16/

于 2013-08-14T09:39:24.333 回答