Question

我在这里：

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

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

我希望能够只获得这些表格中的第一个，或者仅仅是第二个表格。

我试图使用一些CSS假选择器，但没有任何效果：

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

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

我也尝试在.contact-form而不是form上使用这些假选择器：

$(".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]

我知道我可以使用数组索引来获取第一个或第二个，但我希望有一种方法可以使用CSS选择器来完成它。这是因为我有一个现有的API接受CSS选择器的输入，但不处理其他jQuery指令。

Answer 1

您可以使用.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，{{{{{{ 3}}，:last，:even，...

Answer 2

我有一个接受CSS选择器输入的现有API，但是不会处理其他jQuery指令。

如果通过CSS选择器你的意思是你可以传递一个字符串，也许你可以使用:eq()选择器，它比.eq()慢，因为它是一个jQuery选择器 （不是CSS伪选择器）必须由Sizzle选择器库解析，但它做同样的事情。

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

当CSS选择器匹配N个元素时，如何仅获取某个索引处的那个元素？

2 个答案: