title: jQuery Selectable Get Text Value
body: <p>I have an unordered list of items - this list could be hundreds of items long - and as the user clicks an item, I display their selections to the right of the options. I'm using a combination of jQuery selectable and sortable to do so (although I lose the sortable once an option is clicked), and the value that is displayed for the user is the index of the selected item. I want to display the text value of the line item for the user instead, but as expected, grabbing the text() value returns the text values for all line items. </p>
  
  <p>How can I grab just the selected text and display for the user? </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul id="list"&gt;
      &lt;li id="Test1"&gt;Item 1&lt;/li&gt;
      &lt;li id="Test2"&gt;Item 2&lt;/li&gt;
      &lt;li id="Test3"&gt;Item 3&lt;/li&gt;
      &lt;li id="Test4"&gt;Item 4&lt;/li&gt;
      &lt;li id="Test5"&gt;Item 5&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;p id="feedback"&gt;
  &lt;span&gt;You've selected items:&lt;/span&gt;    
      &lt;ul id="select-result"&gt;
       &lt;span id="select-resultSpan"&gt;
          &lt;li&gt;No Items Selected&lt;/li&gt;
       &lt;/span&gt;
      &lt;/ul&gt;    
  &lt;/p&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(function () {
      $("#list").selectable({
          stop: function () {
              var result = $("#select-resultSpan").empty();
              $(".ui-selected", this).each(function () {
                  var index = $("#list li").index(this);
                  result.append("&lt;li&gt;" + (index + 1) + "&lt;/li&gt;");
              });
          }
      });
  });
  </code></pre>
  
  <p>Full example is on JSFiddle: <a href="http://jsfiddle.net/Jk6ZH/1/" rel="nofollow">http://jsfiddle.net/Jk6ZH/1/</a></p>
  
  <p>Thanks in advance.</p>