javascript - clone() 后 length 不起作用

Question

这是我的 jsfiddle ，我想:

• 点击.original div 后，复制它，其中副本将有一个类.black，而不是.original。
• 如果 .container 包含多个 .black 类的 div，则删除 .original div>

到目前为止我让前者工作，但后者似乎不工作。是因为内容是用 jQuery 创建的吗？

<div class="container">
    <div class="original"></div>
</div>

.original {
    display: block;
    height:50px;
    width: 50px;
    margin: 10px;
    background: red;
}
.black {
    display: block;
    height:50px;
    width: 50px;
    margin: 10px;
    background: black;
}

$('.container').on('click', '.original', function () {
    $(this).clone(true).addClass('black').insertAfter($(this)).removeClass('original');
});
$('.container').each(function () {
    console.log($('.black').length);
    if ($('.black').length > 4) {
        $('.original').fadeOut(600);
    }
});

Answer 1

您需要将检查移动到点击处理程序内部，否则它只会在开始时运行一次。

$(document).ready(function () {
    $('.container').on('click', '.original', function () {
        $(this).clone(true).addClass('black').insertAfter($(this)).removeClass('original');
        var itemsNumber = $('.black').length;
        $('.container').each(function () {
            if (itemsNumber > 4) {
                $('.original').fadeOut(600);
            }
        });
    });
});

jsfiddle.net/2U7W6/4