Javascript 获取 li 值并对其进行编码

Question

目前我有两个(也许更多)无序列表，可以用 jquery 和 ui 排序。

有用的是列表是连接的，项目是可拖动的，项目可以被删除，以及添加到列表的表单。

然而，我需要的是一个函数，它可以获取 li 项目的所有内容，并对它们进行 json 编码，以准备发送给某个 db 函数或其他东西。

但是我是 jquery 的新手，找不到 li 项目的文档。

希望我解释得很好。

丹尼尔

更新 - 示例代码

    <script type="text/javascript">

    function addSortable(value) {
        $("#sortable1").prepend("<li class='ui-state-default' id='"+value+"'><span class='ui-icon ui-icon-arrowthick-2-n-s'></span>"+value+"</li>");
    }

    function deleteItem(value) {
        $("#item-"+value).fadeOut('slow');

        $('#sortable1 li').each(function() {
            var text = $(this).text();
        });

        document.getElementById('jsoningreds').innerHTML = text;

    }

    $(function() {
        $("#sortable1, #sortable2").sortable({
            connectWith: '.connectedSortable'
        }).disableSelection();
    });
    </script>

    <ul id="sortable1" class="connectedSortable">

    <li id="item-0" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>8 large chicken thighs, skinned <a href="javascript:deleteItem(0)" class="deleteItem"></a></li>

    <li id="item-1" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>seasoned flour (celery salt, cayenne pepper, paprika and white pepper) <a href="javascript:deleteItem(1)" class="deleteItem"></a></li>
    <li id="item-2" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>2 small eggs, beaten <a href="javascript:deleteItem(2)" class="deleteItem"></a></li>
    <li id="item-3" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>100g butter <a href="javascript:deleteItem(3)" class="deleteItem"></a></li>
    </ul>

    <hr />

    <h3>Recipe number 2</h3>
    <ul id="sortable2" class="connectedSortable">

<li id="item-5" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>3 tsp vegetable oil <a href="javascript:deleteItem(5)" class="deleteItem"></a></li>
    <li id="item-6" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>1 bay leaf <a href="javascript:deleteItem(6)" class="deleteItem"></a></li>
    <li id="item-7" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>250g onions, finely sliced <a href="javascript:deleteItem(7)" class="deleteItem"></a></li>
    </ul>

   <p id="jsoningreds">hello</p>    

Answer 1

您可能想看看 .sortable('serialize') - 它可能会为您解决问题:

Serializes the sortable's item id's into a form/ajax submittable string. Calling this method produces a hash that can be appended to any url to easily submit a new item order back to the server.

It works by default by looking at the id of each item in the format 'setname_number', and it spits out a hash like "setname[]=number&setname[]=number".

You can also give in a option hash as second argument to custom define how the function works. The possible options are: key (replaces part1[] with whatever you want), attribute (test another attribute than id) and expression (use your own regexp).

If serialize returns an empty string, make sure the id attributes include an underscore. They must be in the form: "set_number" For example, a 3 element list with id attributes foo_1, foo_5, foo_2 will serialize to foo[]=1&foo[]=5&foo[]=2. You can use an underscore, equal sign or hyphen to separate the set and number. For example foo=1 or foo-1 or foo_1 all serialize to foo[]=1.

如果 serialize 做的比你需要的多，.sortable('toArray') 应该返回一个包含每个元素的 id 的数组可排序元素。