Question

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

从方法modiNume

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

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

Answer 1

没有要重命名的自动功能。我建议你设置一个像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/

Answer 2

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/

jQuery自动重命名克隆div中的选择器

2 个答案: