Question

我有一个jQuery UI可选列表：http://jqueryui.com/demos/selectable/

我生成的每一行都有一个唯一的ID，如下所示：

<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>

我需要做的是遍历列表并获取所选项的data-userid属性值。

我的JS到目前为止就是这样：

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

});

如果我执行console.log(ui.selected)，我会得到整个HTML字符串。我想我会以错误的方式解决这个问题。有什么想法吗？

Answer 1

该插件为所选项目添加了.ui-selected课程，因此很容易获得所选项目。

.map()函数允许返回带有回调的（排序）数组以返回数据：

var ids = $('#selectable .ui-selected').map(function() {
    return $(this).data('userid');
});

// to get a pure javascript array
ids.toArray();

这是一个fiddle来玩。

Answer 2

假设所选项目的类将被ui选择：

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

获取jQuery UI Selectable的数据属性

2 个答案: