■
var a_list = $('#hoge_list > li').length;これに恐ろしく悩まされる。
$('#hoge_list > li').length
え。
hoge_list が li より大きい？
PHPとかPerlとは全く違うんですね、jQueryなるものは。
いちからちゃんと勉強しないから、こんなこともわからんと。
#hoge ← id="hoge" のこと > li ← チャイルドセレクタ というやつらしい なので、チャイルドの「li」のこと言ってるみたい
つまり・・・
<div id="hoge"> <li>hello world！（古い）</li> </div>
というHTMLがあったら、このhoge内のliの数を数えてる、ってことじゃないかと解釈しました。
あってんのかね・・・。この解釈で。
さらに、1日経って、ようやく「フォームの数を増やしたり減らしたり」のHTML部分が完成しました！！
参考サイト様のおかげで、少しだけわかるようになりました！
解説付きの覚え書きが以下。
//グローバル変数
var prefix_order_list = 'order_list_'; //品目入力欄のname属性の接頭辞
var prefix_order_list2 = 'order_list2_'; //品目入力欄のname属性の接頭辞2
var prefix_order_list3 = 'order_list3_'; //品目入力欄のname属性の接頭辞3
var prefix_order_list4 = 'order_list4_'; //品目入力欄のname属性の接頭辞4
var prefix_order_list5 = 'order_list5_'; //品目入力欄のname属性の接頭辞5
var prefix_order_list6 = 'order_list6_'; //品目入力欄のname属性の接頭辞6
//ページ読み込み後に、イベントハンドラを設定
jQuery(document).ready(function($){
//--------------------------------------------------------
//『品目の追加』ボタンを押した場合の処理
//--------------------------------------------------------
$('#btn_add').click(function(){
//品目入力欄を追加
var len_list = $('#order_list > li').length;
var new_list = '<li><input type="text" size="20" name="' + prefix_order_list + len_list + '">' + '<input type="text" size="20" name="' + prefix_order_list2 + len_list + '">' + '<input type="text" size="20" name="' + prefix_order_list3 + len_list + '">' + '<input type="text" size="20" name="' + prefix_order_list4 + len_list + '">' + '<input type="text" size="20" name="' + prefix_order_list5 + len_list + '">' + '<input type="text" size="20" name="' + prefix_order_list6 + len_list + '"></li>';
$('#order_list').append(new_list);
//『削除』ボタンの一旦全消去し、配置し直す
$('#order_list input[type="button"]').remove();
len_list++;
for(var i=0; i<len_list; i++){
var new_btn = '<input type="button" value="削除">';
$('#order_list > li').eq(i).append(new_btn);
}
});
//--------------------------------------------------------
//『削除』ボタンを押した場合の処理
//--------------------------------------------------------
$(document).on('click', '#order_list input[type="button"]', function(ev) {
//品目入力欄を削除
var idx = $(ev.target).parent().index();
$('#order_list > li').eq(idx).remove();
var len_list = $('#order_list > li').length;
//入力欄がひとつになるなら、削除ボタンは不要なので消去
if (len_list == 1) $('#order_list input[type="button"]').remove();
//入力欄の番号を振り直す
for (var i=0; i<len_list; i++) {
$('#order_list > li:eq(' + i + ') input[type="text"]').eq(0).attr('name', prefix_order_list + i);
$('#order_list > li:eq(' + i + ') input[type="text"]').eq(1).attr('name', prefix_order_list2 + i);
$('#order_list > li:eq(' + i + ') input[type="text"]').eq(2).attr('name', prefix_order_list3 + i);
$('#order_list > li:eq(' + i + ') input[type="text"]').eq(3).attr('name', prefix_order_list4 + i);
$('#order_list > li:eq(' + i + ') input[type="text"]').eq(4).attr('name', prefix_order_list5 + i);
$('#order_list > li:eq(' + i + ') input[type="text"]').eq(5).attr('name', prefix_order_list6 + i);
}
});
});で、以下がフォームの箇所。
<form action="hoge_pg.php" method="POST"> <h3>料金追加</h3> <ul> <li>項目 (※複数可能)<br> <ol id="order_list"> <li><input type="text" size="20" name="order_list_0" value=""><input type="text" size="20" name="order_list2_0" value=""><input type="text" size="20" name="order_list3_0" value=""><input type="text" size="20" name="order_list4_0" value=""><input type="text" size="20" name="order_list5_0" value=""><input type="text" size="20" name="order_list6_0" value=""></li> </ol> <input type="button" value="フォームの追加" id="btn_add"> </li> </ul> <input type="submit" value="データを送信します" name="submit"> </form>
