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') - 它可能会为您解决问题：

序列化可排序的项目ID   到表单/ ajax submittable字符串。   调用此方法会生成哈希   可以附加到任何网址   轻松提交新商品订单   服务器。

默认情况下通过查看   格式中每个项目的ID   'setname_number'，它会吐出来的   像哈希一样   "setname[]=number&setname[]=number"。

你也可以给一个选项哈希作为   自定义的第二个参数定义如何   功能有效。可能   选项包括：key（替换part1[]   无论你想要什么，attribute   （测试另一个属性而不是id）和   expression（使用自己的正则表达式）。

如果serialize返回一个空字符串，   确保id属性包含   下划线。它们必须采用以下形式：   "set_number"例如，3个元素   ID属性为foo_1，foo_5的列表，   foo_2将序列化为   foo[]=1&foo[]=5&foo[]=2。您可以使用   下划线，等号或连字符   分开集合和数字。对于   示例foo=1或foo-1或foo_1全部   序列化为foo[]=1。

如果serialize的效果超出您的要求，.sortable('toArray')应该会返回一个数组，其中包含可排序的每个元素的id。

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

1 个答案: