jquery - 表 tbody 的排序顺序与列表元素 jquery json 的排序顺序相同

Question

我一直在研究这个 jsFiddle，并希望扩展该功能，以便当列表项被更改并通过表单提交时，关联的表主体按照与列表项对应项相同的顺序对自己进行排序:

http://jsfiddle.net/8vWXZ/20/

是否可以像 jQuery 那样将一个元素的顺序映射到另一个元素？

我对动画并不大惊小怪，但这个新要求让我有些困惑。

Answer 1

我不明白 ajax 调用应该做什么，所以我跳过了这一部分。但是根据列表顺序对表进行排序的逻辑存在于表单的提交操作中。我还重新组织了 tbody 标记的使用方式，因为将每个 tr 放在自己的 tbody 标记中并没有真正起到作用。

更新了jsfiddle:http://jsfiddle.net/8vWXZ/24/

代码，将其放在此处:
(#tableOrder 是我们要根据 内部 li 的顺序重新排序其 tr 的表ul#reOrder)

 $('#frmItems').submit(function() {

    var tbl = $("#tableOrder tbody");

    $("#reOrder li").each(function(index) {
        var li_id = $(this).attr("id");
        //Find the number of the item. Eg "item4" should result in "4"
        var li_item_number = li_id.match(/item([0-9]*)/)[1];
        //Inside #tableOrder, find the element (a <tr>) with id corresponding the this <li>'s id. Eg "item4"'s corresponding table row's id is "#tbl-item4"
        var correspondingTR = tbl.find("#tbl-item" + li_item_number);

        tbl.append(correspondingTR);
    });

我还做了一项修改。您为 li 元素和 tr 元素指定了相同的 id(例如 item1)，这是不好的( mmkay )，因为ID应该是唯一的。因此，我将 tableOrder 中的 tr 更改为具有 ids tbl-item1 等。

li_id.match(/item([0-9]*)/)[1] 是 regex匹配。基本上，它在字符串中搜索模式，我们可以从该字符串中绘制某些部分。它寻找的是斜杠内的模式，因此它正在寻找类似 itemX 的内容，其中 X 是一个数字 ([0-9]表示我们对 0 到 9 之间的任何数字感兴趣)。它将返回一个数组，索引 1 上的项目是我们感兴趣的数字。

关于追加:
.each 遍历 li，它们的顺序是正确。对于每一个，它都会将相应的 tr 添加到表的 end 中。因为表中的所有 tr 都会被“触及”，这意味着它从头开始构建 tr 的顺序。第一个要附加的 tr 位于顶部。最后添加的一个是底部的那个(例如，n 上的 tr 在迭代 n 中添加)我制作了两个演示，其实用性值得怀疑，但您可能会发现它们很有帮助。 http://jsfiddle.net/bGGRT/和 http://jsfiddle.net/bGGRT/1/