Javascript 计算div内的输入并添加+；1到每个jquery

我正在尝试构建slider，到目前为止，我构建的一切都是正确的，只是我不知道如何使用jquery计算输入字段，并在操作完成时为每个字段提供递增的数字

我的幻灯片上有3个动作。添加幻灯片、删除幻灯片和对幻灯片排序（对于排序，我使用jquery sortable上下移动元素）

但主要的问题是为了能够正确地保存幻灯片，我需要按数组编号对每个字段进行排序

例如，这里是php页面中的输入字段

        $output .= '<div class="repeat-loop">';

        if( is_array( $values ) ) foreach ( (array)$values as $value ){

            $output .= '<div class="repeat-group">';
            $output .= '<input class="input" name="slideshow[0]" type="text" value="" />';
            $output .= '<a class="delete-row button" href="#">'. __('Remove') .'</a>';

            $output .= '</div>';

            $count++;
        }

        $output .= '<div class="repeat-group empty-slide hidden">';
        $output .= '<input class="input" data-rel="slideshow" type="text" value="" />';
        $output .= '<a class="delete-row button" href="#">'. __('Remove') .'</a>';
        $output .= '</div>';


        $output .= '<a id="add-slide" class="button" href="#">Add slide</a>';

        $output .= '</div>';

但这只适用于我想添加新幻灯片时，它会计算幻灯片的数量。重复分组并将+1添加到下一张幻灯片

问题是，这只会使幻灯片数量增加+1

如果我有3张幻灯片，我会

slideshow[0]
slideshow[1]
slideshow[2]

当我移走一张幻灯片时，让我们说中间的一张比我剩下的要多

slideshow[0]
slideshow[2]

当我尝试添加新幻灯片时，脚本将再次计算从0开始的幻灯片数量，并将该数量添加到下一张幻灯片

所以我现在要

slideshow[0]
slideshow[2]
slideshow[2]

我需要做的是，每当触发“新建幻灯片”、“删除行”或“排序”时，总是要计算输入字段的数量，并更改输入字段的数量，这样我就可以一直保持“喜欢”

slideshow[0]
slideshow[1]
slideshow[2]
slideshow[3]

所以我总是可以在数据库中正确地保存一个数组

小更新 多亏了OlivierH，我知道了在移除幻灯片时如何再次更改编号，现在只剩下在拖放幻灯片时如何更改幻灯片编号了

这是迄今为止运行的更新代码

$('#add-slide').on('click', function() {

    //Get parent element
    var loop = $(this).parent(); // .repeat-loop

    // Count all repeat group div's
    var count = loop.children('.repeat-group').not('.empty-slide').length;

    //Add new slide
    var new_slide = loop.find('.empty-slide').clone(true).removeClass('empty-slide hidden').insertBefore('#add-slide');

    var input = new_slide.find('input');

    var input_name = input.attr('data-rel');

    input.attr('name', input_name + '[' + ( count ) + ']');

    });


$('.repeat-group').on('click', '.delete-row', function() {
    $(this).parent().remove();

    var loop = $('.repeat-loop');

    var count = loop.children('.repeat-group').not('.empty-slide').each(function(i){

        var input = $(this).find('input');

        var input_name = input.attr('data-rel');

        input.attr('name', input_name + '[' + i + ']');
    });
});

$('.repeat-loop').sortable({
    placeholder: "ui-state-highlight"
});
$('.repeat-loop').disableSelection();

---

您可以将幻灯片创建部分与命名部分分开。您只需在所有幻灯片上循环并重命名相应的输入。您可以在创建和删除幻灯片时执行此操作。例如：

$('#add-slide').on('click', function() {
    createSlide();
    renameSlides();
});

function createSlide(){
    //Get parent element
    var loop = $('repeat-loop'); // .of-repeat-loop

    //Add new slide
    var new_slide = loop.find('.empty-slide').clone(true).removeClass('empty-slide hidden').insertBefore('#add-slide');
}

function renameSlides(){
    var loop = $('repeat-loop');
    var count = loop.children('.repeat-group').not('.empty-slide').each(function(i){
        //i contains current index

        //set input attr
        $(this).find('input').attr('name', 'slideshow[' + i + ']');
    });
}

您可以在这里看到，我创建了两个函数来演示这种分离。删除幻灯片时，可以调用

重命名幻灯片（）

函数

编辑

您也可以在放下幻灯片时使用

update

事件调用它：

$('.repeat-loop').sortable({
    placeholder: "ui-state-highlight"
    update: function(event, ui) { renameSlides(); }
});
$('.repeat-loop').disableSelection();

看一看

结束编辑

---

我不确定整个代码是否正常工作，也许您需要稍微调整一下

renameSlides（）

函数。

谢谢，这对我帮助很大。实际上，在添加幻灯片时，我不需要做任何事情。我发布的脚本对这一部分很有效，因为在添加新幻灯片时，我只需要在行中添加新编号。但当移除现有幻灯片或重新排列幻灯片时，会把事情搞砸。你们的部分代码帮助我弄清楚如何在移除幻灯片时订购它们。现在，当我拖放它们并重新排序时，只剩下找出如何再次按数字排序。我发布了使用删除幻灯片的代码更新。您可以使用

receive

event of sortable并调用

renameSlides（）$（'.repeat loop'）.sortable（{占位符：“ui状态突出显示”，接收：函数（事件，ui）{renameSlides（）；}}）。我已编辑了我的答案。receive不起作用，但使用update起了作用。很高兴听到您解决了问题。请将此答案标记为已接受，以便结束主题。谢谢
$('#add-slide').on('click', function() {
    createSlide();
    renameSlides();
});

function createSlide(){
    //Get parent element
    var loop = $('repeat-loop'); // .of-repeat-loop

    //Add new slide
    var new_slide = loop.find('.empty-slide').clone(true).removeClass('empty-slide hidden').insertBefore('#add-slide');
}

function renameSlides(){
    var loop = $('repeat-loop');
    var count = loop.children('.repeat-group').not('.empty-slide').each(function(i){
        //i contains current index

        //set input attr
        $(this).find('input').attr('name', 'slideshow[' + i + ']');
    });
}

$('.repeat-loop').sortable({
    placeholder: "ui-state-highlight"
    update: function(event, ui) { renameSlides(); }
});
$('.repeat-loop').disableSelection();