how to find selected elements with Jquery UI selectable

Question

I am looking for info on the event and ui objects the jQuery selectable events: "selecting", and "start" take as parameters. I cannot find this in the documentation and looping through the properties is no help.

$('#content_td_account').selectable({
    filter: 'li:not(".non_draggable")',
    selecting: function(event, ui) { 
    }
});

Specifically I want to find what elements are being selected and check them to see if their parent elements are the same or not. I assumed this would be in the ui object some where.

Answer 1

When an element is selected it gets the ui-selected class added.

So you could get all selected elements with $(".ui-selected")

This might not work exactly but I think the idea would be something like this:

$('#content_td_account').selectable({
  filter: 'li:not(".non_draggable")',
  selecting: function(event, ui) { 
    var p = $(this).parent();
    $(".ui-selected").each(obj, function() {
      if(obj.parent() == p) {
        // get rad
      }
    });
  }
});

Answer 2

You have to use selected and unselected event which are fired for every selected item in group selection.

var selected = new Array();
$("#selectable").selectable({
    selected: function(event, ui){            
        selected.push(ui.selected.id);
    },
    unselected: function(event, ui){
        //ui.unselected.id
    }
});