Return number of selected elements with jQuery UI Selectable

Question

I'm using jQuery Selectable (http://api.jqueryui.com/selectable/) and need to know the number of elements selected once the operation is complete.

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

The variable "selectedItems" returns the elements that are selected. I can loop through them like this:

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

But I simply want to know how many elements are selected.

The "length" property always returns 1. And it doesn't seem right to put a counter in the above loop. There must be some way of doing this?

Thanks for any help.

Can create stacksnippets , jsfiddle jsfiddle.net to demonstrate ? — guest271314
– guest271314, Commented Aug 31, 2015 at 18:33
Have you tried wrapping your code in a $(document).ready(function() { //your code }? — jonmrich
– jonmrich, Commented Aug 31, 2015 at 18:38

Joseph Marikle · Accepted Answer · 2015-08-31 18:48:16Z

If you want to run one callback after the selections are made and check how many selections there are, you can use the stop event instead. This is run once after the selection is done. Then, you can check the number of selected items by the class that's added, namely 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>

Collectives™ on Stack Overflow

Return number of selected elements with jQuery UI Selectable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related