Question

此代码来自jQuery可选UI（https://jqueryui.com/selectable/#serialize）。如何修改此值以将text值附加到所选的而不是索引中。

我尝试了许多方法失败：

var index = $("#selectable li").text();＃追加所有内容
var index = $("#selectable li").html(); #his追加第一项并停止

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


    <ol id="selectable">
      <li class="ui-widget-content">Item 1</li>
      <li class="ui-widget-content">Item 2</li>
      <li class="ui-widget-content">Item 3</li>
      <li class="ui-widget-content">Item 4</li>
      <li class="ui-widget-content">Item 5</li>
      <li class="ui-widget-content">Item 6</li>
    </ol>

Answer 1

来自documentation for .text()：

获取匹配集合中每个元素的组合文本内容元素，包括他们的后代

来自documentation for .html()：

获取匹配集中第一个元素的HTML内容元素

你可以试试这个：

$("#selectable").selectable({
    stop: function () {
        var text = $(this).children(".ui-selected").map(function () {
            return $(this).text();
        }).get().join('; ');
        $("#select-result").text(text);
    }
});

jsfiddle

这使用.map() function来获取每个所选项目的文本。返回一个实际包含字符串对象而不是DOM元素的jQuery对象，因此.get() function用于获取字符串数组。然后array's .join() function用于组合字符串。

Answer 2

$("#selectable")selectable({
    stop: function () {
        var text += $(this)children(".ui-selected").map(function () {
            return $(this).text();
        }).get().join('; ');
        $("#select-result").text(text);
    }
});

jQuery UI Selectable：获取所选项目的文本

2 个答案: