当CSS选择器匹配N个元素时，如何只获得某个索引上的元素？

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有选择器本身的扩展，支持:eq(n)、:gt(n)、:lt(n)、:first、:last、:even、:odd、.

Answer 2

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

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

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