0

我有一个 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/

4

6 回答 6

3

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

你想要的是：

$('.container .item').length

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

于 2013-02-12T13:36:28.137 回答
2

Check my jsFiddle of the solution http://jsfiddle.net/Nj5vx/4/

What i did is to call a function to remove items then count how many they exists, if zero then show the message:

$(".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>');
        };    
    }); 
});
于 2013-02-12T13:39:52.743 回答
2

试试这个：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，因此请寻找可见的 div...

于 2013-02-12T13:43:53.700 回答
1
  • fadeOut is asynchronous
  • you need to update the list each time am item is removed

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>');
    };
};
于 2013-02-12T13:38:32.487 回答
0

您正在检查 div 容器的长度。它总是存在的不是吗？据我了解，您需要检查里面物品的长度。像这样：

if ($('.container .item').length == 0) {
    $(this).append('<p class="empty">You have selected 0 items</p>');
};
于 2013-02-12T13:37:17.347 回答
0

The length in this case is referring to a property on the returned jQuery object. It tells you how many elements on the page matched your, for lack of a better phrase search criteria:

I.E.
'.container .item'

In this case, you code is telling jQuery to search the DOM and when you find no elements, append to that no element.

于 2013-02-12T13:39:17.197 回答