更新日: 2017-09-07 (木) 13:11:46 (72d)

:Ajax

jQuery 要素をコピーして追加し、IDを書き換える

inputボックスの数を、ユーザーが任意に操作できるように、動的にinputボックスなどを追加したい場合があると思います。

//Html
<div id="roots">
 <div id="each_root">
  <div class="detail">
   <input type="text" name="root">
   <input type="button" value="行き先を追加" onclick="addInput();">
  </div>
 </div>
</div>
//Javascript
function addInput(){
  $("#each_root").clone().appendTo("#roots");
}

ついでに、何かの用途のためにコピーした中身の、IDを連番でつけてそれぞれを識別したい場合、IDを次のように動的に書き換えます。

//Javascript 上記の改訂版
var i = 0;
function addInput(){
  i++;
  $("#each_root").    //#each_rootを取得
         clone(true).   //上で取得した中身をコピー
             find('.detail').  //そのコピーした中身のdetailとついている要素を取得
                 attr('id',i).  //上で取得した要素の中のidをiとする
                       appendTo("#roots");  //#rootsに追加
}
  • 役に立ちました。でも文脈からすると要素名はrootではなくrouteかな?とおもいました -- 2017-06-22 (木) 10:27:55

選択肢 投票
このページの情報は役に立った 5  
このページの情報は役に立たなかった 0  
どちらでもない 0  
このページが参照された数
Total: 12626, 今日: 10, 昨日: 0

でじうぃきは神奈川県横浜市の位置情報システム・スマホアプリ開発の株式会社オンラインコンサルタントが運営しています。
投稿
トップ   このページを編集する 再編集不可にする 差分 バックアップ 添付 複製 名前変更 リロード   新しいページを作る 一覧 検索する 最新の更新   ヘルプ   最終更新のRSS
Last-modified: 2017-09-07 (木) 13:11:46 (72d)