1

我正在用 PHP 创建一系列列表。然后我尝试使用 jQuery 对列表进行排序.sortable()。如果我只有一个列表，我有点工作。但是，如果我有多个列表，则 jQuery 会遍历这两个列表并且只记住最后一个列表。我知道这.each()是如何造成的，我只是不知道如何解决它。

HTML

<div class="list">
  <ul id="sortList_1">
    <li class="item_1" id="item_111">Item 1</li>
    <li class="item_2" id="item_222">Item 2</li>
    <li class="item_3" id="item_333">Item 3</li>
  </ul>
</div>

    <div class="list">
      <ul id="sortList_2">
        <li class="item_1" id="item_444">Item 1</li>
        <li class="item_2" id="item_555">Item 2</li>
        <li class="item_3" id="item_666">Item 3</li>
      </ul>
    </div>

jQuery

$(".list").each(
        function(e) {
        num = e + 1;
        $("#sortList_" + num).sortable(
            {stop:function(i) {
                serial = $("#sortList_"  + num).sortable("serialize");
                $.ajax({
                    type: "GET",
                    url: "writeDB.php",
                    data: serial
                });
            }
        });    
    });
4

1 回答 1

2

当我运行您的代码时，.sortable('serialize')返回null所有列表。根据文档：

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

因此，您可以修改每个项目以具有id格式的属性

<li class="item_1" id="item_444">Item 1</li>

你的脚本应该可以正常工作。您可能会考虑将item_前缀更改为引用项目所在列表的内容（即list1_...vs. list2_...）data ，或者在 ajax 调用中指定序列化数据的列表。

data: { serial: serial, list_id: $(this).attr('id') }

编辑：您也可以稍微清理一下代码：http: //jsfiddle.net/u425C/

于 2012-07-11T01:40:14.610 回答