Question

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

之前

<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'));

原始表上的

，它似乎没有任何影响。为什么这不起作用？有没有办法在一个命令中执行此操作？

Answer 1

来自文档

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

所以你按照现有的顺序添加它们。

Answer 2

这有效：

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

如果你尝试这个并用调试器检查元素

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

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

Answer 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')

Answer 4

您可以链接jquery方法：

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

使用append（）对列表进行排序

4 个答案: