Question

在您的源代码中，您可以在tbody之前定义tfoot，但在浏览器中，tfoot仍然会在最后显示：

<table>
   <thead><tr><th>i get displayed first</th></tr></thead>
   <tfoot><tr><td>i get displayed last</td></tr></tfoot>
   <tbody><tr><td>i get displayed second</td></tr></tbody>
</table>

现在，我想以视觉顺序获取此表的tr元素，而不是它们在html中的顺序。所以这当然不能解决问题：

var rows = $('table tr');

jQuery遍历表格并按照它们在源代码中出现的顺序添加tr元素。

我以为我可以制作单独的块并将它们连接起来以获得正确的顺序：

var header = $('table>thead>tr');
var body = $('table>tbody>tr');
var footer = $('table>tfoot>tr');

var rows = $().add(header).add(body).add(footer);

奇怪的是，订单仍然与$('table tr')一样！怎么会这样？

我还在jsFiddle中解释了这个问题：http://jsfiddle.net/nerdess/sKewX/2/

Answer 1

元素选择器查看DOM，因此它们只会按照它们在DOM中出现的顺序返回元素。

如果你想按照VISUAL的顺序，你必须自己确定每个项目的位置。

请参阅：Determining an element's absolute on-document position

Answer 2

来自add（）方法的文档：

不要假设此方法将元素附加到现有元素按照它们传递给.add（）方法的顺序收集。什么时候元素是同一文档的成员，即生成的集合 from .add（）将按文档顺序排序;也就是说，按顺序排列每个元素在文档中的外观。如果集合包含来自不同文件的元素或不在任何文件中的元素排序顺序未定义。使用a中的元素创建jQuery对象定义良好的订单，使用$（array_of_DOM_elements）签名。

是的，它看起来与$('table tr');

相同

Answer 3

因为$('table tr')只会查找代码（它与控制台无关）。

现在，因为您在添加body之前将var rows添加到footer，所以显示与代码不同是合乎逻辑的。

与发布图书然后告诉读者在page 3之前阅读page 2相同：

现在读者（“控制台”）知道正确的顺序，但这本书仍然保留了错误的页码顺序。

为了让生活更轻松：尽量保持代码和显示尽可能平行。因此，尽量保持两者的相同顺序，以避免不必要的复杂性。

Answer 4

如果您希望按照所需的确切顺序排列元素，则需要手动构建结果。我已经在小提琴中修改了你的代码：http://jsfiddle.net/lechlukasz/sKewX/3/

var header = $('table>thead>tr');
var body = $('table>tbody>tr');
var footer = $('table>tfoot>tr');

var apppend = function(arr, items) {
    for (var i=0;i<items.lenght;i++)
        arr.push(items[i])
}
var rows = []
append(rows, header)
append(rows, body)
append(rows, footer)

console.log(rows);

Answer 5

以下是使用insertion sort算法（http://en.wikipedia.org/wiki/Insertion_sort）的示例。按照设计，add()收集DOM顺序中的元素我们的想法是根据视觉上的方式（使用offset）对元素进行排序。 JsFiddle：http://jsfiddle.net/Pv4tj/

获取正确的tr元素顺序作为jQuery对象

5 个答案: