2013-04-29 22 views
1

Mootools的光滑選擇器引擎文檔似乎有點稀疏/不友好。油滑(MooTools的)選擇器引擎文檔

http://mootools.net/docs/core/Slick/Slick

一個例子:

一般情況下我可以達到與元素的最後一個子:

$('wrapper').getLast().setStyle('background-color','green'); 

我如何利用新光滑引擎來達到同樣的? 文檔在哪裏?

我應該只是學習CSS3選擇器?

在他們的榜樣,他們使用$$(「p.foo!^」)來獲得p系列FOO這意味着什麼的最後一個孩子。 (做他們的意思是$$陣列或最後一個元素???的最後一個孩子p.foo的最後一個實例)

在這裏,我試圖撥弄了一下,最後兩個不起作用:

http://jsfiddle.net/XLVr6/1/

+0

有作爲CSS3選擇器沒有這樣的東西,這是一個不同的事情。只是第3級選擇器 - 這是目前由Slick和Sizzle實施的規範。 **原因**'p.foo!^'工作原因是因爲這是一個實際的滑動快捷鍵 - '^'是第一個元素,Slick中的'!'通常表示反向組合器 - 所以第一個反轉是最後一個(ok,previous ,技術上:)) – 2013-04-29 22:39:48

回答

3

下面的示例將選擇元素的最後一個孩子與id="wrapper。它只會返回一個元素。

$$('#wrapper !^').setStyle('background-color','red'); 

或只有一個元素是必要的,因爲它是更快更好的辦法:

document.getElement('#wrapper !^').setStyle('background-color','red'); 

但是,如果它是這樣寫的,我們選擇頁面上的所有的p元素的最後一個子與class="wrapper"

$$('p.wrapper !^').setStyle('background-color','red'); 

另一種方式來做到這一點是這樣的,但是下面的例子是更快:

('someId').getLast().setStyle('background-color','red'); 

正如指出的貝爾巴托夫這是一個更好的(快)的方式來做到這一點:

document.getElement('#someId :last-child') 

至於你的小提琴,最後兩個選擇應該這樣寫:

$$('#wrapper :last-child').setStyle('background-color','red'); 
$$('#wrapper !^').setStyle('background-color','red'); 

請注意「包裝」和之間的空間「:最後一個孩子」,那是因爲我們選擇「包裝」的子元素的最後一個孩子。

+2

這是不完全正確的重新:與QSA瀏覽器的性能。他們總是比鏈接更快。 http://jsfiddle.net/XLVr6/3/ - 個人而言,我得到了FF:'qsa_reverse_last:69ms','qsa_last_child:40ms','id_and_get_last:191ms'和鉻'qsa_reverse_last:18.000ms','qsa_last_child:11.000 ms','id_and_get_last:49.000ms'。 dom越大,'.getLast()'越慢。在舊的IE中,這會更快。另外,你不應該使用'$$'和應用方法 - 返回一個集合並且暗示'.each'。改用'node.getElement()'。 – 2013-04-29 22:29:34

+0

在這個'基準'超過2500次迭代每個和一個小dom,越低越好(更快)。只是說。 – 2013-04-29 22:31:49

+0

感謝您的評論!我非常驚訝的發現'document.getElement()'比'document.id()。lastChild'更快。你能解釋爲什麼'document.id()。lastChild'太慢了(或者指向正確的方向,因爲我知道應該有一個從父元素到第一個和最後一個孩子的實際指針。請注意,獲取最後一個孩子(在我的測試中)最快的選擇是'#wrapper:last-child'。 – Nils 2013-04-30 12:36:04