Question

I have a jQuery UI selectable list: http://jqueryui.com/demos/selectable/

each row I generate has a unique ID that looks like:

<ol id="selectable">
  <li class="ui-widget-content" data-userid="5">test</li>
  <li class="ui-widget-content" data-userid="6">adfsg</li>
  <li class="ui-widget-content" data-userid="7">ghj</li>
  <li class="ui-widget-content" data-userid="8">fhjk</li>
  <li class="ui-widget-content" data-userid="9">fhn</li>
</ol>

What I need to do is loop through the list and get the data-userid attribute value for ones that are selected.

My JS so far is just this:

$('#selectable').selectable().bind("selectableselected",function(event,ui)
{

});

which if I do a console.log(ui.selected), I get the whole HTML string. I think I am going about this the wrong way. Any ideas?

Answer 1

Assuming the class for a selected item would be ui-selected:

$('#selectable .ui-widget-content.ui-selected').each(function(index) {
     alert($(this).attr('data-userid'));
});