Selectable Serialize jQuery UI:: How to display the content within the html tag instead of the index value?

Question

I'm very new beginner to jquery and I'm using the 'Selectable, Serialize' interaction from jQuery UI.

The interaction shows the index value that the user has selected, but I would like to know how to instead of displaying the index value, display the content that the user has selected.

so actually its like this

SCRIPT::

$( "#selectable" ).selectable({

  stop: function() {

    var result = $( "#select-result" ).empty();

    $( ".ui-selected", this ).each(function() {

      var index = $( "#selectable li" ).index( this );

      result.append( " #" + ( index + 1 ) );

    });

  }

});

HTML::

<ol id="selectable">

  <li class="ui-widget-content">Watermelon</li>

  <li class="ui-widget-content">Orange</li>

  <li class="ui-widget-content">Guava</li>

  <li class="ui-widget-content">Apple</li>

  <li class="ui-widget-content">Banana</li>

 </ol>

The result shown is "You've selected: #1."

But I would like the result to be displayed as "You've selected: Watermelon"

Thanks in advance. :)

Answer 1

$( "#selectable" ).selectable({

  stop: function() {

    var result = $( "#select-result" ).empty();

    $( ".ui-selected", this ).each(function() {

      var index = $( "#selectable li" ).index( this );
      //this is set by jQuery to be the current item in the each iteration
      //so wrap this in the $.jQuery object and then you will be able to call the jQuery method
      //text() to get the text value
      result.append( " " + $(this).text());

    });

  }

});