Question

我正在用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
                });
            }
        });    
    });

Answer 1

运行代码时，.sortable('serialize')会为所有列表返回null。根据{{3}}：

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

因此，您可以修改每个项目，使其具有格式为

的id属性

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

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

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

修改：您也可以稍微清理一下代码：documentation

jQuery选择动态内容PHP

1 个答案: