如何使用 Jquery 序列化多个列表

Posted 2023-02-23

【中文标题】如何使用 Jquery 序列化多个列表

【英文标题】：Howto serialize multiple Lists with Jquery

【发布时间】：2011-02-25 14:11:43

【问题描述】：

我有 3 个可排序的 UL 和一个简单的 jquery/javascript

<ul class="sortable" id="menu1">
  <li id="id_1">whatever</li>
  <li id="id_2">you</li>
</ul>
<ul class="sortable" id="menu2">
  <li id="id_3">wanne</li>
  <li id="id_4">put</li>
</ul>
<ul class="sortable" id="menu3">
  <li id="id_5">in</li>
  <li id="id_6">here</li>
</ul>

$(function() 
    $("ul.sortable").sortable(
        connectWith: 'ul'
        );
    );
</script>

LI 可以在 UL 之间拖动 我怎样才能序列化这个所以我得到例如 menu1[0]=1&menu1[1]=3 或者和数组或任何我可以用来保存状态的东西？

【参考方案1】：

更新

演示： http://jsbin.com/evoru4/2

在你的情况下使用这个：

$(function() 
    $("ul.sortable").sortable(
        connectWith: '.sortable',
        update: function(event, ui) 
        var position = $('.sortable').serial();
        alert( position );
        
    );
);

// 这个函数使你的 UL LI 成为一个序列化的对象

(function($) 
    $.fn.serial = function() 
        var array = [];
        var $elem = $(this);
        $elem.each(function(i) 
            var menu = this.id;
            $('li', this).each(function(e) 
                array.push(menu + '[' + e + ']=' + this.id);
            );
        );
        return array.join('&');
    
)(jQuery);

给你这样的东西：

menu1[0]=id_1&menu1[1]=id_2&menu2[0]=id_4&menu2[1]=id_6&menu3[0]=id_5&menu3[1]=id_3

表示每个元素的位置顺序

【讨论】：

Idd，到目前为止，但问题是我需要知道它们在哪个菜单中，所以 1 个订单是不够的。

【参考方案2】：

得到它的工作 thx 到另一个线程： link text

 $(function() 
 $(".sortable").sortable(

    connectWith: 'ul',
    stop : function () 
     
        $.ajax(
        
            type: "POST",
            url: "update.php",
            data: 
            
                sort1:$("#menu1").sortable('serialize'),
        sort2:$("#menu2").sortable('serialize'),
                sort3:$("#menu3").sortable('serialize')
            ,
            success: function(html)
            

                alert(html);

            
        );
     
).disableSelection();
);