根据行ID

Question

我想使用jQuery根据用户点击链接或按钮时选择的任意顺序重新排序某些表行。 （注意：我不是基于单元格或列标题的字母/数字内容对表格行进行排序 - 我知道有js插件，例如＆＃39;动画表格分类器＆＃39;为此）

继承我的代码示例：

<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>

我想要发生什么：

• 点击＆＃34; #custom-sort-1＆＃34;将重新排序表行：row-c， row-a，row-d，row-b
• 点击＆＃34; #custom-sort-2＆＃34;会重新订购 表行：row-a，row-c，row-b，row-d

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

作为一项附加功能 - 您将如何设置更改行顺序的动画？

Answer 1

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