jQuery UI Selectable: получить текст выбранного элемента

Question

jQuery UI Selectable: получить текст выбранного элемента

0

Этот код, если из пользовательского интерфейса jQuery, выбираемого пользователем (https://jqueryui.com/selectable/#serialize). Как изменить это, чтобы добавить text значение в выбранном вместо индекса.

Я пробовал много способов безуспешно:

var index = $("#selectable li").text(); # добавляет все
var index = $("#selectable li").html(); # это добавляет первый элемент и останавливается

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

fabbb 23 фев. 2014, в 23:58

Источник

Теги:

javascript

jquery

jquery-ui

2 ответа

1

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

santosh 06 март 2014, в 08:33

Ещё вопросы

John S · Accepted Answer · 2014-02-23T21-03-00.000Z

Из документации для .text():

Получите комбинированное текстовое содержимое каждого элемента в наборе согласованных элементов, включая их потомков

Из документации для .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() чтобы получить текст каждого выбранного элемента. Это возвращает объект jQuery, который фактически содержит строковые объекты, а не элементы DOM, поэтому .get() используется для получения массива строк. Затем для объединения строк используется функция .join().

Да, я изменил ваш пример, чтобы он работал, но можете ли вы объяснить, почему это так? Почему я не могу просто позвонить .text() (я изучаю jQuery) Так что ваш мыслительный процесс в решении проблемы приветствуется.
@feed_me_code - Вы можете просто вызвать .text() чтобы получить объединенный текст всех выбранных элементов, как показано в этом jsfiddle , но тогда нет разделителей. Именно так работает функция .text() при вызове нескольких элементов. Получение текста в массиве дает вам больше гибкости.