Selectable Serialize jQuery UI:: 如何在html标签中显示内容而不是索引值？

Question

我是 jquery 的新手，我正在使用 jQuery UI 中的“可选、序列化”交互。

交互显示用户选择的索引值，但我想知道如何不显示索引值，而是显示用户选择的内容。

原来是这样的

脚本::

$( "#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>

显示的结果是“您已选择：#1。”

但我希望结果显示为“您已选择：西瓜”

提前致谢。 :)

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());

    });

  }

});