0

I need to come up with a function which can be used with 'sort' ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort ) which can order items by document order.

Anyone have ideas for efficient implementations or known techniques?

BACKGROUND: I'm building a Greensock- JQuery- and CSS3- based animated presentation to deliver a report on my university work - like powerpoint on steroids. To determine the order of reveals (e.g. animated bullets) I can't always rely on the document order implicit in elements returned from JQuery matches so I need to make order explicit. Problems arise, for example, when the CSS presentation requires different document order (e.g. float right before float left, or a bottom right image before a top-left bullet). I'd like to generalise the functions used to order reveals anyway, so that it's easy to change where it's needed for animation purposes.

PROBLEM: For the reasons above I'd like to use an array of 'order by' functions as a definition of preferred sort of animations within the presentation, with the 'document order' sort function both as a default, and a fallback foundation for any exceptional implementations (presentations in which some reveals violate document order). [In the end, there will be a 'group-by' operator also, which determines which animations are coupled to each other (e.g. and need to share the same closure scope when constructing tweens), so the whole thing will look a bit like a SQL query]

I can't find any existing feature within client-side javascript which gives e.g. an ordinal number for position within the document, but there may something I haven't found, or some browser-specific ones (I'm mainly targeting Chrome).

I'd consider running through the document and caching a document-ordering value at every element, or perhaps every 'reveal' element but I don't know what sensible cross-browser strategies there are for adding properties to elements at runtime for later retrieval, and whether there are any design issues here.

Also I'm sure there are insights and angles on this problem which I haven't considered on the problem as a whole, and I'd welcome contributions. This stuff isn't proprietary BTW. If anyone cares there's experimental implementation going on at https://github.com/cefn/firmware-codesign-readinglog/tree/master/slides/upgrade

4

1 回答 1

1

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

于 2013-11-03T11:12:04.037 回答