當CSS選擇器匹配N個元素時，如何僅獲取某個索引處的元素？

下面是我在哪裏：當CSS選擇器匹配N個元素時，如何僅獲取某個索引處的元素？

// Running this CSS selector: 
$(".contact-form form") 

// Returns this: 
// [form, form]

我希望能夠率先拿到這些形式而已，或者也許只是第二。

我試圖用一些CSS pseudoselectors但沒有奏效：

$(".contact-form") 
// [div.modal-inner.contact-form, div.modal-inner.contact-form] 

$(".contact-form:first-of-type") 
// [div.modal-inner.contact-form, div.modal-inner.contact-form] 

$(".contact-form:nth-of-type(1)") 
// [div.modal-inner.contact-form, div.modal-inner.contact-form]

我的理解：

$(".contact-form form:first-of-type") 
// [form, form] 

$(".contact-form form:nth-of-type(1)") 
// [form, form]

我也使用在.contact-form而不是form這些pseudoselectors嘗試我可以使用數組索引來獲取第一個或第二個，但我希望有一種方法可以使用CSS選擇器來完成。這是因爲我有一個現有的API接受CSS選擇器的輸入，但不處理其他jQuery指令。

來源

2016-11-23 max pleaner

你可以使用.get()方法中，作爲記載：

檢索由jQuery對象相匹配的元素之一。

$(".contact-form form").get(0)

這給你的DOM元素。相反，如果你想爲同一個jQuery對象，然後使用.eq()：

減少匹配的元素集合到一個指定索引處。

$(".contact-form form").eq(0)

所以這幾乎是等同於：

$($(".contact-form form").get(0))

有這個沒有純CSS的解決方案，但jQuery有its own extension of selectors和支持之類的東西:eq(n)，:gt(n)，:lt(n)，:first，:last， :even，:odd，...

來源

2016-11-23 21:01:54 trincot

在2元素數組上使用jQuery，我也可以使用索引'[0]'，我意識到。我想我沒有說清楚，但我希望有一個CSS的唯一方法來做到這一點。原因是我有一個現有的API，它只接受一個CSS選擇器，並且不處理更多的jQuery指令。 –

一個純粹的CSS解決方案應該是['：nth-match']（http://css4-selectors.com/selector/css4/structural-pseudo-class/），但它目前還沒有瀏覽器支持。 – trincot

'：nth-match'從草稿中刪除，只計算兄弟，它不搜索整個樹。 – Oriol

我有一個現有的API接受CSS選擇器的輸入，但不處理其他jQuery指令。

如果你的意思是你可以傳遞一個字符串，也許你可以使用:eq()選擇CSS選擇器，它比.eq()慢，因爲它是一個jQuery選擇（不是CSS僞選擇器）必須被解析由Sizzle選擇器庫，但它做同樣的事情。

$(".contact-form form:eq(0)")

來源

2016-11-23 21:31:21 Ricky

當CSS選擇器匹配N個元素時，如何僅獲取某個索引處的元素？

回答

相關問題