jquery - 当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()方法，如文档所示:

Retrieve one of the elements matched by the jQuery object.

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

这将为您提供 DOM 元素。如果您想要相同的 jQuery 对象，请使用 .eq() :

Reduce the set of matched elements to the one at the specified index.

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