使用 append() 对列表进行排序答案

【问题标题】：Using append() to sort a list使用 append() 对列表进行排序
【发布时间】：2013-04-25 06:03:01
【问题描述】：

我正在尝试对 <table> 中的 <tr> 元素进行排序，如下所示：

之前

<table>
  <tbody>
    <tr id="foo">...</tr>
    <tr id="bar">...</tr>
    <tr id="baz">...</tr>
    <tr id="qux">...</tr>
  </tbody>
</table>

假设我想对行进行排序，使表格变成这样：

之后

<table>
  <tbody id="table">
    <tr id="foo">...</tr>
    <tr id="qux">...</tr>
    <tr id="baz">...</tr>
    <tr id="bar">...</tr>
  </tbody>
</table>

我可以通过使用一系列 jquery 脚本来做到这一点：

$('#table').append($('#qux'));
$('#table').append($('#baz'));
$('#table').append($('#bar'));

但我想把脚本合二为一，当我尝试时：

$('#table').append($('#qux,#baz,#bar'));

在原表上，似乎没有任何作用。为什么这不起作用？有没有办法在一个命令中做到这一点？

【问题讨论】：

你可以试试这个吗？ $('#table').append($('#qux') + $('#baz'));没试过，只是猜测..
stackoverflow.com/a/3160718/1104483

标签： javascript jquery sorting append

【解决方案1】：

这行得通：

$('#table').append($('#qux'),$('#baz'),$('#bar'));

如果您尝试这样做并使用调试器检查元素

var elements = $('#qux, #baz, #bar');
$('#table').append(elements);

你可以看到 jquery 正在做什么：它从你的选择器中加载元素，但它们是按照它们在 DOM 中出现的顺序排列的！（酒吧、 baz 和quz）。所以 append 方法是有效的，但它是以相同的顺序附加它们！

【讨论】：

【解决方案2】：

来自文档

The order of the DOM elements in the returned jQuery object may not be identical, as they will be in document order.

因此，您将按照它们已经存在的顺序添加它们。

【讨论】：

【解决方案3】：

好的，我做了一些测试，这就是为什么它不能按照你想要的方式工作：

http://jsfiddle.net/9V2Xr/ 在这里，您可以看到，如果它在 DOM 中按顺序排列（这是从另一个表中第一次尝试），它就可以工作。

但是http://jsfiddle.net/9V2Xr/1/这里，如果是你的原始表，你可以看到，当你这样做

var sort = $('#qux,#baz,#bar').detach();
console.log(sort);

在日志中，您会找到bar，然后是baz，最后是qux。结论，它从 DOM 中获取命令

编辑基本上，我的测试没用，解释in the doc。

因此，主要解决方案是链接append() 或使用多个选择器$('#qux'), $('#baz'),$('#bar') 而不是$('#qux,#baz,#bar')

【讨论】：

【解决方案4】：

您可以链接 jquery 方法：

$('#table').append($('#qux')).append($('#baz')).append($('#bar'));

【讨论】：