clickイベントで要素の複製とname属性の変更

Question

既に一つ表示されている要素を2つにしたい場合に、
ボタンをクリックで要素を増やす、ということをやろうとしています。

HTMLとjQuery

<div class="cloneArea">
  <div class="hogeInfo">
    <input type="number" class="hoge" name="hoge_1" id="hoge_1">番
    <input type="number" class="hoge" name="hoge_1_r" id="hoge_1_r">回
    <input type="number" class="hoge" name="hoge_1_b" id="hoge_1_b">周
  </div>
</div>
<button id="btn>＋</button>

このようにHTMLを組んでいます。
インプットが3つ並んでいる状態です。この3つで1セットで、＋ボタンを押すと、
.hogeInfoが複製するという感じです。

$(function(){
  $("#btn").on('click', function(){
    $(".hogeInfo").clone().appendTo(".cloneArea");
  });
});

このコードで複製は出来るのですが、name属性とid属性の値が同じになってしまいます。。。

複製と同時にname属性とid属性は連番で表示していきたいです。

ボタンを1回押した時のHTMLの出力が下記のようになるのが理想です。

<div class="cloneArea">
  <div class="hogeInfo">
    <input type="number" class="hoge" name="hoge_1" id="hoge_1">番
    <input type="number" class="hoge" name="hoge_1_r" id="hoge_1_r">回
    <input type="number" class="hoge" name="hoge_1_b" id="hoge_1_b">周
  </div>
  <div class="hogeInfo">
    <input type="number" class="hoge" name="hoge_2" id="hoge_2">番
    <input type="number" class="hoge" name="hoge_2_r" id="hoge_2_r">回
    <input type="number" class="hoge" name="hoge_2_b" id="hoge_2_b">周
  </div>
</div>

idやname属性の値の数値のみ変わっています。
2回押した場合はhoge_3_bなどが出てくるイメージです。

可変変数などを使用して組むのでしょうか？

ご教授頂けますと幸いです。

Answer 1

属性値は jQuery なら .attr()、 DOM なら getAttribute(), setAttribute() で操作できます。
取得した文字列を String#replace で置換してやれば良いと思います。

`hoge_1_r`.replace(/^(\D+)(\d+)/, function (subString, p1, p2) {
  return p1 + (Number(p2) + 1);
});

Comments

[退会済みユーザー]

ご回答ありがとうございます。

一番初めのhogeInfoのid名を取得すればいいんでしょうか？

[think49]

$(".hogeInfo").clone() の input 要素ノード郡に適用してください。

[退会済みユーザー]

ありがとうございます。
複製してattrメソッドで変更でいけました！