javascript - jquery 按类别排序列表中的限制数量

Question

您好，我想限制我的 <ul id="sortable1"> 中的项目数量其中类别等于该列表中的 3 个项目。

当不特定于某个类时，我已经实现了这一点:

 $(function() {
    $("#sortable1").sortable({
    connectWith: '.connectedSortable',
    //receive: This event is triggered when a
    //connected sortable list has received an item from another list.
    receive: function(event, ui) {
        // so if > 7
        if ($(this).children().length > 7) {
            //ui.sender: will cancel the change.
            //Useful in the 'receive' callback.
            $(ui.sender).sortable('cancel');
            alert('Your selection has been cancelled. Maximum  7 banners are allowed in the carousel.');

        }
    }
    }).disableSelection();
});

但是，当我更具体地说明这一点时，这不起作用

$('#sortable1').sortable({
    connectWith: ".connectedSortable",

    revert:true,
    receive: function(event, ui)
    {
        var list = $(this);
            if (list.attr('class') = "defaultbanner") {
                    if (list.children().length > 3) {
                            // move item back to main_list
                                        alert('Only three default banners can be selected!');

                            $(ui.sender).sortable('cancel');
                    }
            }
        }
}).disableSelection();

我不确定我做错了什么，有人能指出我正确的方向吗？

我想要做的是在我的 ul 中不允许超过 3 个默认横幅sortable1 。我已向所有横幅添加了一个名为 defaultbanners 的类来处理这个问题。我上面实现的方法不起作用。

有人可以告诉我如何有效地实现这一点吗？

我的代码可以在我的jsFiddle上看到

提前致谢。

Answer 1

可以这样完成:

receive: function(event, ui)
{
    var list = $(this);
    if (list.children('.defaultbanner').length > 3) {
        // move item back to main_list
        alert('Only three default banners can be selected!');
        $(ui.sender).sortable('cancel');
    }
}

示例:

Fiddle