0

入力を追加して削除した後、jQueryによって入力名要素配列の番号を配置したいのですが、入力を削除した後は機能しません。どうすれば修正できますか？

デモ：http： //jsfiddle.net/mUMdW/

私のコード：

HTML：

<div class="ch">
        <a href="#" class="adding">Add</a>
</div>
<p class="ffdd"></p>

jQuery：

function removeidx(clss, type){
    var remove = $(this).closest(clss);
    remove.fadeOut('slow', function () {
        $(this).remove(); // or change next line to  $('.RowCheck:visible')
        $(clss).each(function (idx) {
            var checkBoxes = $('input[type="'+type+'"]',this);
            checkBoxes.each(function(i) {
              var str = $(this).attr('name');  
              var currentIdx = parseInt(str.match(/\d+/)[0], 10);  
              $(this).attr('name', str.replace(currentIdx,idx));
           })
        });
    });
}
$(document).on('click change', 'a.adding', function(e) {
    e.preventDefault();
    var idx = $('.Row').length;
    $('.ffdd').append('<div class="Row"> <input name="arr['+idx+'][]" type="text" value=""> <a href="#" class="remove_row" title="remove this row">Remove</a></div>');   
});
$('.ffdd').on('click','a', function(e){
    $(this).closest('.Row').remove();
    removeidx('.ffdd', 'text');
})
4

1 に答える 1

1

配列が連続した番号で構成されるように、削除後に入力に番号を付け直したいと思います。

親関数にコンテキストするインデックスを使用して、番号の付け直し関数など、いくつかのことを書き直しました。

function removeidx(context, clss, type) {
    var remove = $(context).closest(clss);
    remove.fadeOut('slow', function () {
        $(this).remove();
        var idx = 0;
        $(clss).each(function () {
            var checkBoxes = $('input[type="' + type + '"]', this);
            checkBoxes.each(function () {
                var name = $(this).attr('name');
                name = name.replace(/\d+/, idx);
                $(this).attr('name', name);
                idx = idx + 1;
            });
        });
    });
}

$(document).on('click change', 'a.adding', function (e) {
    e.preventDefault();
    var idx = $('.Row').length;
    $('.ffdd').append('<div class="Row"> <input name="arr[' + idx + '][]" type="text" value=""> <a href="#" class="remove_row" title="remove this row">Remove</a></div>');
});

$('.ffdd').on('click', 'a', function (e) {
    removeidx(this, '.Row', 'text');
})

あなたはそこで動作しているバージョンを見ることができます：http：//jsfiddle.net/8sVWp/

于 2013-01-30T10:45:06.420 に答える