根据行 ID 以任意顺序重新排序表行

Question

我想使用 jQuery 根据我在用户单击链接或按钮时选择的 任意 顺序对某些表行重新排序。 （注意：我不是根据单元格或列标题的字母/数字内容对表格行进行排序 - 我知道有像“动画表格排序器”这样的 js 插件）

这是我的代码示例：

<ul>
    <li><a id="custom-sort-1" href="#">Custom Sort 1</a></li>
    <li><a id="custom-sort-2" href="#">Custom Sort 2</a></li>
</ul>

<table>
    <tr id="row-a">
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
    </tr>
    <tr id="row-b">
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
    </tr>
    <tr id="row-c">
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
    </tr>
    <tr id="row-d">
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
    </tr>
</table>

我想要发生的事情：

• 单击“#custom-sort-1”将重新排列表格行：row-c， 行-a、行-d、行-b
• 单击“#custom-sort-2”将重新排序 表格行：row-a、row-c、row-b、row-d

我将如何使用 Jquery 来做到这一点？

作为一项附加功能 - 您将如何为不断变化的行顺序设置动画？

Answer 1

可以使用 jQuery 将元素作为列表获取，枚举它们，从 ID 构建一个 javascript 数组，使用数组对象的内置 .sort() 方法通过提供自定义比较函数来使用 javascript包括任意排序的逻辑（需要保留一个带有按钮单击值的变量），然后使用 jQuery 使用 jQuery 方法重新排列元素以进行 DOM 操作，例如：.add()、.insert()、. append(), .after() 并在其中包含动画。