jQuery selector with nth-of-type()

Question

Using Chrome Development Tools

jQuery('.proejct-text-field')

gives me four instances of HTML Elements:

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

Trying the following doesn't return any Elements.

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

As for my understanding the first Element should be returned. I just use jQuery in order to find the right selector for my purposes and to take them into my css file. So How can I select the first Elment of those Divs. Btw: They are not wrapped into a certain parent element. So any child methods won't work. Further the number of divs is variable.

@magic_al - You said in a comment below that you don't want to use jQuery. If your real question is "What is the CSS selector to select the first element with a certain class?" you should click "edit" and update your question, because having the jQuery tag and "jQuery" in your question title is confusing things. And if that _is_ your real question, it is a duplicate of some [other](http://stackoverflow.com/questions/6447045/css3-selector-first-of-type-with-class-name) [questions](http://stackoverflow.com/questions/5287272/css-select-first-element-with-a-certain-class). — nnnnnn, Dec 26 '13 at 10:07

score 7 · Answer 1 · answered Dec 26 '13 at 09:50

7

The nth-of-type selector looks for element type, like div, span etc not for class name or any other selectors

use :eq(index)

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

or .eq(index)

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

answered Dec 26 '13 at 09:50

Arun P Johny

384,651
66
527
531

Ok I did understand why it is't working my way. Thanks. – magic_al Dec 26 '13 at 09:54
Note that you can use `:nth-of-type` in combination with class name and other selectors. – nnnnnn Dec 26 '13 at 09:58
@nnnnnn yes as an additional condition.... but the type counter is applied to the element type not to other conditions – Arun P Johny Dec 26 '13 at 10:05

Mr. Alien · Accepted Answer · 2013-12-26T10:14:05.257

3

Your class name is incorrect, you are having a . in the ~~class=".proejct-text-field ..."~~.

Also, you can use .first() to select the very first element like

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

You cannot select nth-of-class because there's no such way to select nth element with a class, so your selector should work though it doesn't because you have to take out the period . from the class name in your DOM)*

Demo

Demo 2 (Using jQuery .first())

edited Dec 26 '13 at 10:14

answered Dec 26 '13 at 09:51

Mr. Alien

153,751
34
298
278

2

Thanks you seem to be the only one who understand, that I don't want to use jQuery. Still div.proejct-text-field:nth-of-type(1) dosn't do it. – magic_al Dec 26 '13 at 09:57
The demo only works because all the elements have that class and the same parent. (You can see [here](http://jsfiddle.net/czyzg/1/) that it doesn't work the way the OP wants if you have more complicated html.) – nnnnnn Dec 26 '13 at 10:02
@nnnnnn Obviously it won't, I've already mentioned it in my answer that `nth-` has nothing to do with `class`, OP also explains this.. *They are not wrapped into a certain parent element* – Mr. Alien Dec 26 '13 at 10:10
So what is the purpose of your demo? As it is, it appears to be doing what the OP wants but really it doesn't. Your answer says "you can use something like `div.proejct-text-field:nth-of-type(1)`", but now in your comment you acknowledge that that won't actually work, so... – nnnnnn Dec 26 '13 at 10:13

nnnnnn · Answer 3 · 2013-12-26T09:55:21.900

The :nth-of-type() selector "Selects all elements that are the nth child of their parent in relation to siblings with the same element name." - But you indicated that your elements are "not wrapped into a certain parent element", i.e., they have no particular relationship with each other.

If you just want the first element with that class do this:

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)')

Note that you should remove the . from the class name in your class="" attribute in the markup. I.e., it should be:

class="proejct-text-field"

(And you've spelled "project" incorrectly everywhere.)

score 2 · Answer 4 · answered Dec 26 '13 at 09:50

2

First change mark up with this

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

instead

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

And use .first() if you want first

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

answered Dec 26 '13 at 09:50

Dhaval Marthak

17,246
6
46
68

score 0 · Answer 5 · answered Dec 26 '13 at 09:51

Firstly, you have a . in your class Name, that's unnecessary... Just make it proejct Instead of nth-of-child, use :eq, like this

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

and your jQuery

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

or

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

jQuery selector with nth-of-type()

5 Answers5

Linked