Question

现在当你添加输入时，它们的编号为1比1，所以让我们说我们添加5个冠军他们将被编号为

1
2
3
4
5

让我们说我们要删除第三个它看起来像

1
2
4
5

我希望在删除之后编号

1
2
3
4

这是一个有效的http://jsfiddle.net/dyje773m/和http://89.69.172.125/cms2.0/

代码中最重要的部分：

$(document).ready(function(){
    championNumberArray = 0;
    championNumber = 1;
    $('a#AddChampion').on('click',function(){
        $('div#ChampionInput').append(
        '<div class="Champion" data-id="'+championNumberArray+'">\
             <a href="#" class="Remove">Remove</a>\
             <br>\
             <input type="text" class="ChampionInput" list="champions" name="champion[]" placeholder="Champion '+championNumber+'">\
             <datalist id="champions"></datalist>\
             <a href="#" class="AddSpell">Add Spell</a>\
             <a href="#" class="AddGeneralChange">Add General Change</a>\
             <div class="GeneralChanges">\
             </div>\
             <div class="SpellChanges">\
             </div>\
             <br>\
         <div>');
        for(var key in champions){
            if(champions.hasOwnProperty(key)){
                $('#champions').append('<option value="' + key + '">');
            }
        }
        championNumberArray++;
        championNumber++;
    });
});

和索引

<div id="wrap">
    <a href="#" id="AddChampion">Add Champion</a>
    <form name="second_form" id="second_form" method="POST">
        <div id="ChampionInput">
        </div>
        <br><br>
        <input type="submit" name="submit">
    </form>
</div>

Answer 1

删除输入时，必须重新编号。尝试类似下面的内容。

$('div#ChampionInput').on('click', 'a.Remove',function(){
    var champion = $(this).closest('.Champion');
    var id = champion.data("id");
    var nextChampion = champion;

    //
    // Loop through each following champion
    while((nextChampion = nextChampion.next()).length != 0){
        // Update id
        nextChampion.attr("data-id",id++)

        // Update placeholder
        // Placeholder is id + 1 because placholders start at 1 and ids start at 0
        nextChampion.find(".ChampionInput").attr("placeholder","Champion " + (id + 1));        
    }

    // Remove champion
    champion.remove();

});

顺便说一句，您不需要在选择器之前使用标记名。特别是对于ID，每页应该是唯一的。 #ChampionInput与div#ChampionInput完全相同，但#ChampionInput更快，因为浏览器不必检查tagName是否匹配。

Answer 2

你不应该使用championNumberArray和championNumber来存储输入数量，而不是你应该计算所有的div与冠军＆＃39;冠军＆＃39;获得当前数量。

$("div.Champion").length;

添加输入时，您应该设置＆＃34; id＆＃34;使用上述方法的值。

当输入被删除时，你应该得到＆＃34; id＆＃34;删除前的值...删除后，你可以做以下（（假设＆＃34; 3＆＃34;被删除））

var c=3-1, el;

while(el=$("div.Champion:eq("+c+")").get())
{ $(el).data("id",c+1);  c++; }

删除中间输入重新编号data-id后

2 个答案: