jQuery按类别排序的限制数量

Question

Hi i want to limit the amount of items in my <ul id="sortable1"> where the class is equal to 3 items in that list.

I've achieved this when not specific to a class as so:

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

However when I make this more specific this does not work

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

I'm not sure what I am doing wrong, can anyone point me into the right direction?

What I want to do is to not allow more than 3 default banners in my ul sortable1 . I've added a class to all my banners called defaultbanners to get a handle on this. The way I've implemented above just doesn't work.

Can someone show me how this should be implemented effectively?

My code can be seen on my jsFiddle

Thanks in advance.

Answer 1

It can be done like this:

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');
    }
}

Example:

Fiddle