jQuery 选择动态内容 PHP

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。根据documentation：

如果 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_... 与list2_...），或者在ajax 调用的data。

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

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