0

1) 前文。一連のセレクターを含む div を複製するための jQuery メソッドを起動するリンクがあり、すべてがフォーム内にあります。

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 に答える