2009-01-26 51 views
1

如果您創建HTML佈局,像這樣基於類的名稱奇數元素如何選擇,甚至或

<ul> 
    <li class='a'></li> 
    <li class='b'></li> 
    <li class='a'></li> 
    <li class='b'></li> 
    <li class='a'></li> 
    <li class='b'></li> 
    <li class='a'></li> 
    <li class='b'></li> 
</ul> 

,並儘量選擇具有奇數元素「A」類像這樣$$(「A:奇」 )你會得到空陣列,如果你做$$('。a:even'),你將得到所有四個李元素與'a'類..這真的很奇怪..但即時通訊新的mootools,也許我會做一些事情錯誤..

所以我的問題是如何選擇第一個和第三個元素與類。 我知道,我可以用函數做這樣的

$$( 'A')的過濾器(功能(項指數){回報指數%2;}。

但它太複雜,這樣的小任務,選擇奇數或偶數元素..

回答

2

問題是:odd和:even(以及他們的CSS cousins:nnth-child(奇怪)和:nnth-child(偶數))引用元素作爲子元素出現的順序他們的父母,而不是那個特定選擇者的孩子。

這爲我工作(原型,但它看起來像MooTools有類似的語法):

var odd = $$('.a').filter(function(item, index) { 
    return index % 2 == 0; 
}); 
var even = $$('.a').filter(function(item, index) { 
    return index % 2 == 1; 
}); 

編輯:看來你已經覆蓋,在這個問題上我噓閱讀前充分回答。

0

如果你想獲得第一和第三,你只需要$$(「A」)。

你試圖讓1和第5項目?那就像$$('a:nth-​​child(4n + 1))

我是大ass ng mootools使用css3 Structural pseudo-classes

0

無眼瞼,所以你說這不是一個錯誤?它應該如何工作?

+0

是的。根據規範是正確的(假設:甚至和:odd是他們的CSS的縮寫:第n個孩子(*)堂兄弟) – eyelidlessness 2009-01-26 02:33:18

0

:nth-​​child僞選擇器查看DOM元素的(non-zero indexed) index,而不是在所選(匹配)元素內。 MooTools添加了':odd'選擇器來選擇'真實'奇數元素,因此索引從0開始。

因此在您的示例中,選擇'.a:nth-​​child(odd)'將返回所有li.a元素,因爲索引從1開始。選擇'.a:odd'不會選擇任何內容,因爲沒有'真正'奇怪的li.a元素。

你可能想要的是選擇':nth-of-type'元素。因此,選擇'.a:nth-​​of-type(odd)'會返回所有奇怪的li.a元素(第一個和第三個元素 - 它使用DOM元素的索引)。

默認情況下,MooTools不支持':nth-​​type-type'選擇器,但可以使用Selectors.Pseudo類來擴展選擇器引擎(現在找不到示例)。