带有 nth-of-type() 的 jQuery 选择器答案

【问题标题】：jQuery selector with nth-of-type()带有 nth-of-type() 的 jQuery 选择器
【发布时间】：2014-01-13 23:26:57
【问题描述】：

使用 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 的数量是可变的。

【问题讨论】：

你为什么在class属性中使用.？
你也拼错了“project”。
@magic_al - 你在下面的评论中说你不想使用 jQuery。如果您真正的问题是“选择特定类的第一个元素的 CSS 选择器是什么？”您应该单击“编辑”并更新您的问题，因为在您的问题标题中包含 jQuery 标记和“jQuery”会使事情变得混乱。如果这是你真正的问题，它是一些other questions的重复。

标签： jquery css jquery-selectors

【解决方案1】：

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

使用:eq(index)

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

或.eq(index)

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

【讨论】：

好的，我确实明白为什么它不能按我的方式工作。谢谢。
请注意，您可以将:nth-of-type 与类名和其他选择器结合使用。
@nnnnnn 是作为附加条件......但是类型计数器应用于元素类型而不是其他条件

【解决方案2】：

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

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

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

您不能选择nth-of-class，因为没有这种方法可以选择带有class 的nth 元素，因此您的选择器应该可以工作，尽管它不能工作，因为您必须从@ 中取出句点. 987654333@ DOM 中的名称）*

Demo

Demo 2（使用 jQuery .first()）

【讨论】：

谢谢你似乎是唯一一个明白我不想使用jQuery的人。仍然 div.proejct-text-field:nth-of-type(1) 不这样做。
该演示之所以有效，是因为所有元素都具有该类和相同的父级。（您可以看到 here 如果您有更复杂的 html，它不会按照 OP 想要的方式工作。）
@nnnnnn 显然不会，我已经在回答中提到nth-与class无关，OP也解释了这一点.. 他们不是包裹在某个父元素中
那么你演示的目的是什么？事实上，它似乎在做 OP 想要做的事情，但实际上并没有。您的回答说“您可以使用 div.proejct-text-field:nth-of-type(1) 之类的东西”，但现在在您的评论中您承认这实际上不起作用，所以...

【解决方案3】：

首先用这个改变标记

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

改为

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

如果你想先使用.first()

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

【讨论】：

【解决方案4】：

: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"

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

【讨论】：

【解决方案5】：

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

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

和你的 jQuery

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

或

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

【讨论】：