Return 个选定元素的数量 jQuery UI 可选

Question

我正在使用 jQuery 可选择的 (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"returns选中的元素。我可以像这样遍历它们：

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

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

"length" 属性总是returns 1.而且在上面的循环里放一个计数器好像也不对。必须有某种方法可以做到这一点？

感谢您的帮助。

Answer 1

如果你想运行选择完成后回调一个，看看有多少个选择，你可以改用stop事件。这是选择完成后运行一次。然后，您可以通过添加的class查看选中项的数量，即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>

Return 个选定元素的数量 jQuery UI 可选

Return number of selected elements with jQuery UI Selectable

jquery

jquery-ui-selectable