javascript/jquery 增量检查

Question

我有一个非常微妙的问题，我举个例子。我所做的是，我基本上是在前面添加元素并通过递增来区分它们(由于某些原因我需要这样做)，然后有一个选项可以单击任何元素并将其删除。

这只是一个愚蠢的例子:

    $(function () {
    var i = 0;
        $("#new").click(function(){
            i++;
            $("#container").prepend("<div class='prepended "+i+"'>blah blah blah</div>")


            $(".prepended").click(function(){
                $(this).remove();
            });
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="new">click here</button>
    <div id="container"></div>

当我删除任何元素时，我需要以某种方式设法使递增的“i”变量填充缺失的元素。我不知道如何用文字解释，所以我用“代码”来解释:

假设我在前面添加了 6 个元素，因此“i”变量现在为 6:

if(deleted_divs_class == 1)
{
    i = 1; // fill the missing "1"
    next_click_i = 6; // variable i on next click should be 6 in order to continue in right order
}
else if (deleted_divs_class !== 1 || 6) // deleted element is somewhere from middle so it's not 1 or 6
{
    i = fill_missing_number; // fill the removed number
    next_click_i = 6; // continue in right order
}
else
{ 
 i--;
 // deleted element is the last element of line so continue normally by incrementing
}

我知道如何获取deleted_divs_class变量并应用next_click_i变量，但我不知道如何使整个事情动态工作

我知道这个问题可能看起来很奇怪，但这只是一个例子，它是更大代码的一部分，我只需要编写这个“增量”的逻辑，以便使整个事情正常工作，因为我需要。

所以我无法弄清楚逻辑。

Answer 1

我想我创建了您正在寻找的代码，但我不确定我是否正确理解了您的问题。看看这段代码。这是你想要的还是不想要的？

    $(function () {
        var missed=[]; //Here will be stored missed numbers
        var i = 0;
        $("#new").click(function(){
            var n=0;
            if(missed.length>0) {
                n=missed.shift(); //get next missed number from the array
            } else
                n=++i;

            $("#container").prepend("<div data-i='"+n+"' class='prepended "+n+"'>"+n+"blah blah blah</div>")


        });
        $('#container').on('click',".prepended",[], function(){
                missed.push($(this).data('i')); //save removed number into missed numbers array
                $(this).remove();
          });    
    });
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="new">click here</button>
    <div id="container"></div>