2

我正在尝试对 a 中的<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'));

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

4

4 回答 4

1

从文档

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

因此，您以与它们相同的顺序添加它们。

于 2013-05-01T08:21:59.790 回答
1

这有效：

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

如果您尝试此操作并使用调试器检查元素

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

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

于 2013-05-01T08:22:10.743 回答
1

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

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

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

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

在日志中，您会发现barthenbaz和 finally qux。结论，它从 DOM 中获取命令

编辑 基本上，我的测试没用，文档中对此进行了解释。

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

于 2013-05-01T08:23:51.253 回答
0

您可以链接 jquery 方法：

$('#table').append($('#qux')).append($('#baz')).append($('#bar'));
于 2013-05-01T08:17:06.487 回答