YUI第一個孩子的節點匹配給定的選擇器

Question

我看過questions of similar title，但它們不完全一樣。

首先，我使用YUI（與Liferay 6.0兼容的3.2.0）。

我已經有Node參考。我的目標是獲得匹配給定CSS選擇器的第一個孩子Node。起初，我是這樣做的：

... 
parse: function(node) { 
    var title = node.one('>span, >div, >a, >h1'); 
    ... 
}, 
... 

這個工程在Firefox，Chrome和IE 9+以上。但是，我們必須支持IE 8，所以我挖掘並瞭解W3C的參考說明：

A child selector is made up of two or more selectors separated by ">"

這似乎表明，按照規範，需要家長，即使在似乎並非如此。所以我尋找多一點，看到的jQuery實際上提到了這個特定的情況下被棄用：

Note: The $("> elem", context) selector will be deprecated in a future release. Its usage is thus discouraged in lieu of using alternative selectors.

我找不到這種情況下，YUI文檔中明確提到，但我還是不要不認爲使用它是安全的（並且它在IE8中不受支持）。我嘗試了一堆東西，包括使用*>span, *>div, ...,*:first-child+span, ...，但他們沒有工作。所以我離開了我用的是：

var title = node.get('children').filter('>span, >div, >a, >h1').item(0); 

但這似乎不雅，效率低下，因爲它背後的代碼將有大量的循環（因爲過濾器不會短路，所有我想要的是第一場比賽）。任何人有更好的建議？

Answer 1

在這種情況下，退一步可能是有道理的。目前您的要求被定義爲「匹配此CSS選擇器」。你可以把它看作是「讓這個節點的第一個孩子是一個跨度，一個div，一個錨點或一個h1」（或者類似的東西嗎？）

如果是這樣，請選擇引擎。相反，調用node.get（'children'），然後遍歷生成的NodeList - 您的迭代器函數可以簡單地檢查節點名稱是否正確，如果是，則檢查短路。這應該會給你穩定的表現，而且應該是相當可讀的。