Jquery J从无序列表中的列表项中指定属性

我有一个无序列表（由Flask下的jinja2生成），用户可以使用鼠标或键盘以交互方式重新排序。每个列表项都有一个datadbid属性（数据库键）和一个dataseq属性（定义该项在列表中的位置）

data seq属性最初由jinja2设置，然后由jquery代码更新，该代码允许重新排序以反映用户对序列的任何更改

一旦用户完成了对列表的重新排序，我想向服务器发送一个简单的json，发送数据dbid和数据seq键/值对，这样序列更改就可以持久化到数据库中

因此，对于3行列表，生成的json应该如下所示：

[
{“dbid”：123，“seq”：“1”}，
{“dbid”：456，“seq”：“2”}，
{“dbid”：789，“seq”：“3”}
]

我正在努力创建json，而不是迭代列表并构建它

我希望能够使用JSON.stringify，将列表项的类作为选择器并指定所需属性的键，但这不起作用（我得到一个空字符串）

HTML/Jinja2代码段：

{ListTypes%中的ListType为%1}
{%set itemId=（loop.index | string）%}
{%set itemDbId=（ListType.id | string）%}
{%set-itemSeq=（ListType.sequence | string）%}

{{ListType.name}

{%endfor%}

JQuery代码：

$(document).ready(function(){
    $('#btnSave').bind('click', function() {
        var listData = $(".ais-row");
        var jsonData = JSON.stringify(listData, ["dbid", "seq"]);
        alert(jsonData); // Test purposes only

        // AJAX code here

    });
});

如果我使用上面的JSON.stringify代码，那么结果是一个空字符串。我不确定对于data-*属性，我是否应该在replacer数组中指定“dbid”、“data dbid”甚至“dataDbid”，但我已经尝试了所有3种方法，但都没有效果

如果我取出替换器阵列：

        var jsonData = JSON.stringify(listData);

。。。然后我得到所有的属性，包括“dbid”和“seq”（这证明它们至少被找到了）。我还尝试编写了一个替换函数，但也没有成功（键值似乎没有被传递，我最终得到了json中的所有属性）：

如果取出replacer数组，则得到所有属性，包括“dbid”和“seq”

奇怪的是，当我在JSFIDLE中尝试时，我只看到一个没有任何属性的字符串化jQuery对象。不确定您是否希望完全避免“迭代列表并构建它”，但这里有一种使用jQuery的

.map（）

方法的方法：

$（函数（）{
const li=$（“.ais行”）；
常量有效负载=$.map（li，函数（el，i）{
el=$（el）；
返回{
dbid:el.attr（“数据dbid”），
序号：el.attr（“数据序号”）
}
});
log（JSON.stringify（payload））；
})

您可能没有获得属性，因为用于填充属性的jinja2代码不会在小提琴中执行。是的，如果有必要，我会做一些类似于您的解决方案的事情，但stringify对我不起作用肯定是有原因的。我已经接受了这个答案，但请注意，它只适用于在初始加载后数据dbid和数据seq没有更改的情况（因为属性值是不可变的）。在我的例子中，随着用户更改排序顺序，我正在更改数据顺序。返回el.data（）.seq而不是el.attr（“data seq”）对我有效。

“返回el.data（）.seq而不是el.attr（“data seq”）对我有效”

-我假设这是因为您是通过

.data（“seq”，1）

而不是

.attr（“data seq”，1）

设置值的？严格来说，它们不是一回事，仅供参考。

    let replacer = function (key, value) {
        alert(key);   // Displays "undefined"
        if((key == "dbid") | (key == "seq")) {
            return value;
        } else {
            return undefined;
        }
    }