jquery - jQuery Selectable 获取文本值

Question

我有一个无序列表的项目——这个列表可能有数百个项目——当用户点击一个项目时，我会在选项的右侧显示他们的选择。我正在使用 jQuery selectable 和 sortable 的组合来执行此操作（尽管单击选项后我会丢失可排序），并且为用户显示的值是所选项目的索引。我想为用户显示订单项的文本值，但正如预期的那样，获取 text() 值会返回所有订单项的文本值。

如何仅获取选定的文本并为用户显示？

HTML：

<ul id="list">
    <li id="Test1">Item 1</li>
    <li id="Test2">Item 2</li>
    <li id="Test3">Item 3</li>
    <li id="Test4">Item 4</li>
    <li id="Test5">Item 5</li>
</ul>

<p id="feedback">
<span>You've selected items:</span>    
    <ul id="select-result">
     <span id="select-resultSpan">
        <li>No Items Selected</li>
     </span>
    </ul>    
</p>

JS：

$(function () {
    $("#list").selectable({
        stop: function () {
            var result = $("#select-resultSpan").empty();
            $(".ui-selected", this).each(function () {
                var index = $("#list li").index(this);
                result.append("<li>" + (index + 1) + "</li>");
            });
        }
    });
});

完整示例在 JSFiddle 上：http: //jsfiddle.net/Jk6ZH/1/

提前致谢。

Answer 1

如果我没看错，认为这就是你所需要的：

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

    // this works for me
    result.append("<li>" + $(this).text() + "</li>");
});

http://jsfiddle.net/JuJDt/

Answer 2

尝试这个：

$("#list li").on("click",function() {
  $("#select-resultSpan").append($(this).text());
})

Answer 3

You have to find innerHTML from index value.
you can also get other attributes with this method.

$(function () {
        $("#list").selectable({
            stop: function () {
                var result = $("#select-resultSpan").empty();
                $(".ui-selected", this).each(function () {
                    var index = $("#list li").index(this);
                    var text = $("#list li").get(index).innerHTML; //  for id you can replace .innerHTML with .id 
                    result.append("<li>" + (text) + "</li>");
                });
            }
        });
    });

看这里