jQueryでの要素コピー時、属性名変更について

Question

現在jQueryを使い、要素を追加する処理を作成しております。

<td>の下に<div>要素があり、これを増やす処理を行っており、要素の追加は うまくいっているのですが、この<div>内の子<input>等のid及びnameの 属性名変更がうまくいきません。 現象として、1つ目の子要素の属性名は変更されますが、２つ目以降が変更 されない状況です。

jQueryに詳しい方、ご教授お願いします。

<table>
	<tbody>
		<tr>
    		<td>
				<input type="button" name="addBtn" id="addBtn" value="追加" />
			</td>
			<td id="hogehuga">
<?php
for ( $i = 0; $i < $count; $i++ ) {
?>
				<div>
					<input type="text" id="hogeNm_<?= $i ?>" name="hogeNm_<?= $i ?>" />
					<select id="hogeSel_<?= $i ?>" name="hogeSel_<?= $i ?>">
						<option value="0">hoge</option>
						<option value="1">huga</option>
					</select>
					<input type="checkbox" id="hogeChk_<?= $i ?>" name="hogeChk_<?= $i ?>" />hoge
					<input type="checkbox" id="hugaChk_<?= $i ?>" name="hugaChk_<?= $i ?>" />huga
					<input type="button" name="btnGO" value="GO" />
				</div>
<?php
}
?>
			</td>
		</tr>
	</tbody>
	<script>
		$(function() {
			// ＋ボタン押下時
			$('#addBtn').click(function(e) {
				// 入力項目を増やす（コピー）
				$('#hogehuga div:last-child').clone(true).appendTo($('#hogehuga'));

				// 追加分の項目のidとnameを変更
				var cnt = 3;  // ←実際には別場所からのカウントを使ってます。
				$('#hogehuga div:last-child').children('input:nth-child(1)').attr({id:'hogeNm_' + cnt, name:'hogeNm_' + cnt});
				$('#hogehuga div:last-child').children('input:nth-child(2)').attr({id:'hogeChk_' + cnt, name:'hogeChk_' + cnt});
				$('#hogehuga div:last-child').children('input:nth-child(3)').attr({id:'hugaChk_' + cnt, name:'hugaChk_' + cnt});
				$('#hogehuga div:last-child').children('select:nth-child(1)').attr({id:'hogeSel_' + cnt, name:'hogeSel_' + cnt});
			});
		});
	</script>
</table>

Answer 1

以下とする事で解決しました。
eq()というインデックス扱えるのがあるんですね。

ご回答頂いた方々、有難うございました。

            	$('#workers div:last-child').children('input').eq(0).attr({id:'IN_WorkerNm_' + cnt, name:'IN_WorkerNm_' + cnt});
            	$('#workers div:last-child').children('input').eq(1).attr({id:'IN_ChkNight_' + cnt, name:'IN_ChkNight_' + cnt});
            	$('#workers div:last-child').children('input').eq(2).attr({id:'IN_ChkMidNt_' + cnt, name:'IN_ChkMidNt_' + cnt});
            	$('#workers div:last-child').children('select').eq(0).attr({id:'IN_Patern_' + cnt,  name:'IN_Patern_' + cnt});

Comments

[yambejp]

チェックボックスのidの競合が解消されていますか？

[NEO_PLANETT-777]

idは競合はしてません。
今回はまともな名称に変えました。

[yambejp]

またcntがスタティックに指定されているので、1回目の追加はうまくいっても
2回目以降は競合しますね、工夫してください

[NEO_PLANETT-777]

cntは気にしないで下さい（汗
テスト用に固定にしてます。
本来は別場所でカウントした値が入るので競合はしません。

Answer 2

そもそもがidが最初から競合しているのでこのHTMLをいくらいじっても
まっとうに動かすことはできません
idの付け方を抜本的に検討し直してください

sample

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
  $('#addBtn').click(function(e) {
    var cnt =$('#hogehuga [id^=hogeNm_]').length;
    var dom=$('#hogehuga div:last-child').clone(true);
    dom.find('select[id],input[id]').each(function(){
      var id=$(this).attr('id').replace(/_([0-9]+)$/g,'_'+cnt);
      $(this).attr('id',id);
    });
    dom.find('select[name],input[name]').each(function(){
      var name=$(this).attr('name').replace(/_([0-9]+)$/g,'_'+cnt);
      $(this).attr('name',name);
    });
    dom.appendTo($('#hogehuga'));
  });
});
</script>
<table>
<tbody>
<tr>
<td>
<input type="button" name="addBtn" id="addBtn" value="追加" />
</td>
<td id="hogehuga">
<?php
$count=3;
for ( $i = 0; $i < $count; $i++ ) {
?>
<div>
<input type="text" id="hogeNm_<?= $i ?>" name="hogeNm_<?= $i ?>" />
<select id="hogeSel_<?= $i ?>" name="hogeSel_<?= $i ?>">
<option value="0">hoge</option>
<option value="1">huga</option>
</select>
<input type="checkbox" id="hogeChk_0_<?= $i ?>" name="hogeChk_0_<?= $i ?>" />hoge
<input type="checkbox" id="hugaChk_1_<?= $i ?>" name="hugaChk_1_<?= $i ?>" />huga
<input type="button" name="btnGO" value="GO" />
</div>
<?php
}
?>
</td>
</tr>
</tbody>
</table>

Answer 3

cloneした要素を一度変数に代入して、idとnameを変更してからappendしてはどうでしょう？

Comments

[NEO_PLANETT-777]

以下のように変えてみましたが、症状は変わらずです。

// 入力項目を増やす（コピー）
var clItm = $('#hogehuga div:last-child').clone(true);

// 追加分の項目のidとnameをカウントアップ
clItm.children('input:nth-child(1)').attr({id:'hogeNm_' + cnt, name:'hogeNm_' + cnt});
clItm.children('input:nth-child(2)').attr({id:'hogeChk_' + cnt, name:'hogeChk_' + cnt});
clItm.children('input:nth-child(3)').attr({id:'hugaChk_' + cnt, name:'hugaChk_' + cnt});
clItm.children('select:nth-child(1)').attr({id:'hogeSel_' + cnt, name:'hogeSel_' + cnt});
clItm.appendTo($('#hogehuga'));