jquery 没有正确追加计数

Question

我想用 jquery 动态创建行，并为每个新行添加一个从 1 到 2 的计数等。但是当我点击添加行时，第一次点击会很好，但之后它会依赖于现有的和我只需要1、2、3、4、5等。我做错了什么？

小提琴：Click

HTML：

<div class="row">I'm a row<p></p></div>

<a href="#" class="add_row">Add Row</a>

CSS：

.row {
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 5px;
    background-color: slateGrey;
    float: left;
}

a.add_row {
    float: left;
}

JQUERY：

$("a.add_row").click(function() {

                var $row = $("body .row").first().html();

                var $remove_row = ("<a href='#' class='remove_row'>remove</a>");

                $(this).before("<div class='row'>"+ $row +"</div>");

                $(this).prev().append($remove_row);

                var count = 0;

                $(".remove_row").click(function() {

                    var $remove = $(this).parent();

                    $remove.remove();

                    return false;
                });

                $(".row").each(function() {
                    count++;

                        $(this).append(count);

                });

                return false;

            });

Answer 1

我已重构您的代码以实现该功能。就这样吧

HTML：

<div class="container">
    <div class="row">
        <p>I'm a row</p>
    </div>

</div>
<a href="#" class="add_row">Add Row</a>

JS：

var count = 0;
$("a.add_row").click(function() {

                var remove_row = ("<br><a href='#' class='remove_row'>remove</a>");


                count++;
              var cloned = $('.container').children('.row').first().clone();     
    cloned.appendTo('.container');



    cloned.find('p').append(count);
    cloned.find('p').append(remove_row);
});

$('body').on('click', '.remove_row', function(){
    $(this).closest('.row').fadeOut();
    count--;

});

演示：Fiddle

Answer 2

关于包含倒计时的解决方案（例如 i-- 和 count--）的有趣之处在于，当您删除一个不是最后一个值的值时（例如，您将 4 个新项目附加到列表中以获得新的总共 5，您删除项目编号 2) 然后附加一个新项目，新项目将具有最后一个项目编号，而不是已删除项目的编号。

我认为一种解决方案，尽管它可能不是最有效的方法是完全删除 i--/count-- 并将每个数字读入一个数组，然后在重新添加一个项目时，通过数组查找缺失的序列中的数字 (Arrays - Find missing numbers in a Sequence) 并使用缺失的数字，如果没有缺失的数字，则 ++ 计数。

Answer 3

将您的 var 计数放在函数之外。

var count = 0; //like this
$("a.add_row").click(function() {
            var $row = $("body .row").first().html();

            var $remove_row = ("<a href='#' class='remove_row'>remove</a>");

            $(this).before("<div class='row'>"+ $row +"</div>");

            $(this).prev().append($remove_row);

            $(".remove_row").click(function() {

                var $remove = $(this).parent();

                $remove.remove();

                return false;
            });

            $(".row").each(function() {
                count += 1; // this adds one each time, or count++ , I prefer the first

                    $(this).append(count);

            });

            return false;

        });