如何为文档顺序定义客户端排序(...)函数

时间:2013-11-03 11:07:04

标签: javascript jquery sorting dom greensock

我需要提出一个可以与'sort'(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)一起使用的函数,它可以按文档顺序对项目进行排序。

任何人都有有效实施或已知技术的想法吗?

背景:我正在构建一个基于Greensock-JQuery和CSS3的动画演示文稿来提供关于我大学工作的报告 - 比如类固醇的powerpoint。要确定显示的顺序(例如动画项目符号),我不能总是依赖于从JQuery匹配返回的元素中隐含的文档顺序,所以我需要明确命令。例如,当CSS呈现需要不同的文档顺序时(例如,在向左浮动之前浮动,或在左上方子弹之前的右下图像),出现问题。无论如何,我想概括用于定制显示的函数,以便在动画目的所需的位置进行更改。

问题:由于上述原因,我想使用'order by'函数数组作为演示文稿中首选动画类型的定义,将'文档顺序'排序函数作为默认值,并且任何特殊实施的后备基础(一些显示违反文档顺序的演示)。 [最后,还会有一个'group-by'运算符,它确定哪些动画相互耦合(例如,在构造补间时需要共享相同的闭包范围),所以整个事情看起来有点像一个SQL查询]

我在客户端javascript中找不到任何现有功能,例如文档中位置的序数,但可能是我找不到的东西,或某些浏览器特定的(我主要针对Chrome)。

我会考虑浏览文档并在每个元素或每个'reveal'元素上缓存文档排序值,但我不知道在运行时向元素添加属性有什么合理的跨浏览器策略以后检索,以及这里是否有任何设计问题。

此外,我确信这个问题有见解和意见,我没有考虑整体问题,我欢迎你的贡献。这个东西不是专有BTW。如果有人关心https://github.com/cefn/firmware-codesign-readinglog/tree/master/slides/upgrade

的实验性实施

1 个答案:

答案 0 :(得分:1)

您可以在支持它的浏览器上使用compareDocumentPosition(DOM3)。对于没有的浏览器,您可以使用Sizzle(jQuery中的选择器引擎)使用的实现来确保它按顺序提供元素。在source中,查找其定义sortOrder函数的位置。对于使用compareDocumentPosition的版本和不使用{{1}}的版本,都有分支。 (我在这里复制它,但它在Sizzle中有其他依赖,副本最多也不完整。)