使用 jQuery UI Selectable 返回选定元素的数量答案

【问题标题】：Return number of selected elements with jQuery UI Selectable使用 jQuery UI Selectable 返回选定元素的数量
【发布时间】：2015-08-31 18:30:51
【问题描述】：

我正在使用 jQuery Selectable (http://api.jqueryui.com/selectable/)，需要知道操作完成后选择的元素数量。

//Example Code
$('body').selectable({
    selected: function(event,ui) {
       var $selectedItems = ui.selected;
       alert($selectedItems.length); // This is always 1
    }
});

变量“selectedItems”返回被选中的元素。我可以像这样遍历它们：

$selectedItems.each( function() {
    // do something
});

但我只是想知道选择了多少元素。

“长度”属性总是返回 1。在上面的循环中放置一个计数器似乎不正确。一定有办法做到这一点？

感谢您的帮助。

【问题讨论】：

可以创建stacksn-ps，jsfiddlejsfiddle.net演示吗？
您是否尝试过将代码封装在 $(document).ready(function() { //your code } 中？

标签： jquery jquery-ui-selectable

【解决方案1】：

如果您想在做出选择后运行一个回调并检查有多少选择，您可以改用stop 事件。选择完成后运行一次。然后，您可以按添加的类，即ui-selected，查看选中项的数量。

$( "#selectable" ).selectable({
    stop: function(event,ui) {
       var selectedItems = $('.ui-selected', this);
       console.log(selectedItems.length);
    }
});

  #selectable .ui-selecting {
    background: #ccc;
  }
  #selectable .ui-selected {
    background: #999;
  }

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">

<ul id="selectable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

【讨论】：