Question

我一直在研究这个jsFiddle，并希望扩展功能，以便当列表项被更改并通过表单提交时，相关的表tbodys按照与列表项对应的顺序排序：

是否可以在jQuery中将顺序从一个元素映射到另一个元素？

我对动画的事情并不感兴趣，但是这个新的要求让我有点兴奋。

Answer 1

我没有得到ajax调用应该做的事情，所以我跳过那部分。但是，在表单的提交操作中，根据列表顺序使用表的逻辑就在那里。我还重新组织了tbody标记的使用方式，因为它实际上没有用于将每个tr放在自己的tbody标记中。

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

代码，把它放在SO上：
（#tableOrder是我们要根据tr内的li的顺序重新排序的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应该是唯一的。所以我更改了tr内的tableOrder以使其具有ID tbl-item1，依此类推。

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

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

以与列表元素jquery json相同的顺序对表tbody的顺序进行排序

1 个答案: