Question

我有一个div，里面可以包含n个div，但也可以为空。如果div为空，则可以在其中没有项目时加载，或者当用户通过单击关闭删除其中的项目时，应显示诸如“您已选择0项”之类的消息。

我的想法是尝试：

if ($('.container').length == 0) {
    $(this).append('<p class="empty">You have selected 0 items</p>');
};

但这不起作用？我做错了什么？

代码：http://jsfiddle.net/Nj5vx/1/

Answer 1

执行$('.container')时，会选择其上带有<div>类的container元素，并返回包含该元素的jQuery对象。当您访问其length属性时，您将获得匹配的元素数量，而不是这些元素中元素的数量。

你想要的是：

$('.container .item').length

这将在具有类item的元素内选择具有类container的元素。如果.container元素为空（没有.item元素），则length属性将为0。

Answer 2

检查我的jsFiddle解决方案http://jsfiddle.net/Nj5vx/4/

我所做的是调用一个函数来删除项目然后计算它们存在的数量，如果为零则显示消息：

$(".close").click(function(){
    $(this).parents('.item').fadeOut(200, function(){
        $(this).remove();
        if ($('.container .item').length == 0) {
            $('.container').append('<p class="empty">You have selected 0 items</p>');
        };    
    }); 
});

Answer 3

试试这个：http://jsfiddle.net/5Yftg/

$(".close").click(function () {
    $(this).parents('.item').fadeOut(200, function () {
        if ($('.container > .item :visible').length == 0) {
            $('.container').append('<p class="empty">You have selected 0 items</p>');
        };
    });
});

由于您隐藏了div，请查找可见的...

Answer 4

fadeOut是异步的
每次删除项目时都需要更新列表

http://jsfiddle.net/charlesbourasseau/Nj5vx/3/

$(".close").click(function(){
    $(this).parents('.item').fadeOut(200, function() {
        $(this).remove();
        update();
    });

});

var update = function() {
    if ($('.container div').length == 0) {
        $('.container').append('<p class="empty">You have selected 0 items</p>');
    };
};

Answer 5

您正在检查div容器的长度。它永远存在不是吗？据我所知，你需要检查里面的物品的长度。像这样：

if ($('.container .item').length == 0) {
    $(this).append('<p class="empty">You have selected 0 items</p>');
};

Answer 6

这种情况下的长度是指返回的jQuery对象上的属性。它会告诉您页面上有多少元素与您匹配，因为缺少更好的短语搜索条件：

I.E.
'.container .item'

在这种情况下，你的代码告诉jQuery搜索DOM，当你找不到元素时，追加到那个没有元素。

如果div为空，则无效

6 个答案: