使用jQuery从字符串创建ul列表

Question

我有这个工作但是我不能让它在我现有的代码中工作。

我需要做的是：http://jsfiddle.net/uJcB7/176/

因此，当我将复选框中的功能添加到div中时，它会将它们放入列表中。我有各种功能，但无法弄清楚如何将两者结合起来。

因此，当您将复选框中的要素添加到div中时，它会将要素字符串添加为可以拖动的列表。

干杯

Answer 1

我想回答的最简单方法是演示？

jsFiddle demo

希望这就是你所追求的，我会为你分解代码。

首先，我合并了您的文档就绪函数调用，并折叠了在适当的时间使用相同选择器的任何jQuery语句。这导致了初始化代码，即：

$(function() {

    $("#sortable").sortable().disableSelection();
    $('#cblistp input').click(additionalFeatures);

    additionalFeatures();
});

然后我折叠了原始的allVals数组，并用jQuery的map函数替换它。 map函数本质上是each函数，结果的额外好处是返回的任何元素的数组。在map函数中，我们只是返回所有选定HTML输入的.value 1-by-1。然后我join给他们一个更好的,加入。这给了我们：

// add additional features
function additionalFeatures() {   
    // map the selected items
    var text = $.map($('#cblistp :checked'), function(input) {
        return input.value;
    }).join(', ');

    $('#additionalFitFeatures').text(text);
};

除此之外，如前所述，map函数的作用与each函数类似。这允许我们在选择要在div中显示的文本的同时构建新的可排序列表。首先我们需要清除旧的sortable，然后我们将添加所选的项目，最后我们将构建一个新的sortable。这给了我们以下内容：

// add additional features
function additionalFeatures() {
    // clear out the old sortable
    var sortableList = $('#sortable').sortable('destroy').find('li').remove().end();

    // map the selected items
    var text = $.map($('#cblistp :checked'), function(input) {
        sortableList.append('<li>' + input.value + '</li>');            
        return input.value;
    }).join(', ');

    $('#additionalFitFeatures').text(text);
    sortableList.sortable();
};