質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

4647閲覧

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

NEO_PLANETT-777

総合スコア333

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/11/13 04:31

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

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

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

PHP

1<table> 2 <tbody> 3 <tr> 4 <td> 5 <input type="button" name="addBtn" id="addBtn" value="追加" /> 6 </td> 7 <td id="hogehuga"> 8<?php 9for ( $i = 0; $i < $count; $i++ ) { 10?> 11 <div> 12 <input type="text" id="hogeNm_<?= $i ?>" name="hogeNm_<?= $i ?>" /> 13 <select id="hogeSel_<?= $i ?>" name="hogeSel_<?= $i ?>"> 14 <option value="0">hoge</option> 15 <option value="1">huga</option> 16 </select> 17 <input type="checkbox" id="hogeChk_<?= $i ?>" name="hogeChk_<?= $i ?>" />hoge 18 <input type="checkbox" id="hugaChk_<?= $i ?>" name="hugaChk_<?= $i ?>" />huga 19 <input type="button" name="btnGO" value="GO" /> 20 </div> 21<?php 22} 23?> 24 </td> 25 </tr> 26 </tbody> 27 <script> 28 $(function() { 29 // +ボタン押下時 30 $('#addBtn').click(function(e) { 31 // 入力項目を増やす(コピー) 32 $('#hogehuga div:last-child').clone(true).appendTo($('#hogehuga')); 33 34 // 追加分の項目のidとnameを変更 35 var cnt = 3; // ←実際には別場所からのカウントを使ってます。 36 $('#hogehuga div:last-child').children('input:nth-child(1)').attr({id:'hogeNm_' + cnt, name:'hogeNm_' + cnt}); 37 $('#hogehuga div:last-child').children('input:nth-child(2)').attr({id:'hogeChk_' + cnt, name:'hogeChk_' + cnt}); 38 $('#hogehuga div:last-child').children('input:nth-child(3)').attr({id:'hugaChk_' + cnt, name:'hugaChk_' + cnt}); 39 $('#hogehuga div:last-child').children('select:nth-child(1)').attr({id:'hogeSel_' + cnt, name:'hogeSel_' + cnt}); 40 }); 41 }); 42 </script> 43</table> 44 45

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

以下とする事で解決しました。
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});

投稿2019/11/13 05:26

NEO_PLANETT-777

総合スコア333

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2019/11/13 05:34

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

2019/11/13 05:44

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

2019/11/13 05:45

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

2019/11/14 07:08

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

0

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

sample

javascript

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script> 3$(function() { 4 $('#addBtn').click(function(e) { 5 var cnt =$('#hogehuga [id^=hogeNm_]').length; 6 var dom=$('#hogehuga div:last-child').clone(true); 7 dom.find('select[id],input[id]').each(function(){ 8 var id=$(this).attr('id').replace(/_([0-9]+)$/g,'_'+cnt); 9 $(this).attr('id',id); 10 }); 11 dom.find('select[name],input[name]').each(function(){ 12 var name=$(this).attr('name').replace(/_([0-9]+)$/g,'_'+cnt); 13 $(this).attr('name',name); 14 }); 15 dom.appendTo($('#hogehuga')); 16 }); 17}); 18</script> 19<table> 20<tbody> 21<tr> 22<td> 23<input type="button" name="addBtn" id="addBtn" value="追加" /> 24</td> 25<td id="hogehuga"> 26<?php 27$count=3; 28for ( $i = 0; $i < $count; $i++ ) { 29?> 30<div> 31<input type="text" id="hogeNm_<?= $i ?>" name="hogeNm_<?= $i ?>" /> 32<select id="hogeSel_<?= $i ?>" name="hogeSel_<?= $i ?>"> 33<option value="0">hoge</option> 34<option value="1">huga</option> 35</select> 36<input type="checkbox" id="hogeChk_0_<?= $i ?>" name="hogeChk_0_<?= $i ?>" />hoge 37<input type="checkbox" id="hugaChk_1_<?= $i ?>" name="hugaChk_1_<?= $i ?>" />huga 38<input type="button" name="btnGO" value="GO" /> 39</div> 40<?php 41} 42?> 43</td> 44</tr> 45</tbody> 46</table>

投稿2019/11/13 05:20

編集2019/11/13 05:35
yambejp

総合スコア114505

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

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

投稿2019/11/13 04:55

mkt38

総合スコア50

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

NEO_PLANETT-777

2019/11/13 05:11

以下のように変えてみましたが、症状は変わらずです。 // 入力項目を増やす(コピー) 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'));
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問