Question

使用Chrome开发工具

jQuery('.proejct-text-field')

给出了四个HTML元素实例：

<div class=".proejct-text-field ...">...<>
<div class=".proejct-text-field ...">...<>
<div class=".proejct-text-field ...">...<>
<div class=".proejct-text-field ...">...<>

尝试以下操作不会返回任何元素。

jQuery('.proejct-text-field:nth-of-type(1)')

至于我的理解，应该返回第一个元素。我只是使用jQuery来为我的目的找到合适的选择器并将它们带入我的css文件中。那么我如何选择那些Div的第一个元素。顺便说一句：它们没有包裹在某个父元素中。所以任何子方法都行不通。此外，div的数量是可变的。

Answer 1

nth-of-type selector查找元素类型，如div, span等，不是类名或任何其他选择器

使用:eq(index)

jQuery('.proejct-text-field:eq(0)')

或.eq(index)

jQuery('.proejct-text-field').eq(0)

Answer 2

您的class名称不正确， ~~.~~ 中有class=".proejct-text-field ..."。

此外，您可以使用.first()选择第一个元素，例如

$('.proejct-text-field').first();

您无法选择nth-of-class，因为没有这种方法可以选择带有nth的{{1}}元素，因此您的选择器应该可以正常工作，因为您必须取出期限来自您DOM中class名称的. *

Demo

Demo 2（使用jQuery class）

Answer 3

:nth-of-type() selector “选择与具有相同元素名称的兄弟姐妹相关的父亲的第n个孩子的所有元素。” - 但是您表示您的元素“未包裹”进入某个父元素“，即他们彼此没有特别的关系。

如果您只想要该类的第一个元素，请执行以下操作：

jQuery('.proejct-text-field').first()
// or
jQuery('.proejct-text-field').eq(0)
// or
jQuery('.proejct-text-field:first')
// or
jQuery('.proejct-text-field:eq(0)')

请注意，您应该从标记中的.属性中的类名中删除class=""。即，它应该是：

class="proejct-text-field"

（而且你到处拼错了“项目”。）

Answer 4

首先用此

更改标记

<div class="proejct-text-field ...">...<> <!-- removed `.` -->

而不是

<div class=".proejct-text-field ...">...<>

如果你想要第一个

，请使用.first()

jQuery('div.proejct-txt-field').first();

Answer 5

首先，您的班级名称中有.，这是不必要的......只需将其设为proejct 而不是nth-of-child，请使用:eq，就像这样

<div class="proejct-txt-field"></div>

和你的jQuery

jQuery('.proejct-text-field:eq(0)');

或

jQuery('.proejct-txt-field').first();

带有nth-of-type的jQuery选择器（）

5 个答案: