Question

I have a simple grid of li elements that I have made selectable. I then iterate over them once the selection is complete. But the collection of elements appears to be a set of duplicates when you select more than 1 box in the grid. What is going on here?

Example can be found here

Answer 1

It looks like the selected function is being called multiple times, once for each selected element in fact.

I’ve modified your code to see this:

elements = $('.ui-selected');
console.log(elements);

From the documentation at http://jqueryui.com/demos/selectable/ it suggests that “This event is triggered at the end of the select operation, on each element added to the selection.” so what you are seeing is the expected behaviour.

I think what you want is the ‘stop’ event:

$("#selectableGrid").selectable({
    stop: function() {
        elements = $('.ui-selected');
        elements.each(function(idx, item) {
            alert($(item).position().top);
        });
    }
});​