克隆（）后长度不起作用答案

【问题标题】：length wont work after clone()克隆（）后长度不起作用
【发布时间】：2014-06-03 01:55:57
【问题描述】：

这里是我的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);
    }
});

【问题讨论】：

刚刚更正，谢谢。但这不是解决方案。
您需要将检查移动到点击处理程序内部，否则它只会在开始时运行一次。 jsfiddle.net/2U7W6/4
jsfiddle.net/2U7W6/5 试试这个
为什么关闭？正如 Vic 和 Neel 所说，问题就在那里
我认为这个问题不应该结束

标签： javascript jquery

【解决方案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

【讨论】：

【解决方案2】：

淡出的代码只被调用一次（在就绪函数中）。你需要在click函数里面移动代码

$(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);
        }
    });
 });
});

【讨论】：

【解决方案3】：

问题是当您检查并设置框数的值时，它只是第一次被初始化，而$(document).ready(function () { $('.container').on('click', '.original', function () { $(this).clone(true).addClass('black').insertAfter($(this)).removeClass('original'); }); $(".original").click(function(){ var itemsNumber = $('.black').length; $('.container').each(function () { if (itemsNumber > 4) { $('.original').fadeOut(600); } }); }); });

【讨论】：