in the :nth-child selector

[guest]

use html file in attachment

and write in firebug console

>>> $('.menu li').size()
7
>>> $('.menu li:nth-child(5)').size()
1
>>> $('.menu li:nth-child(5)')
[li#li5]
>>> $('.menu li:nth-child(2)')
[li#li2]
>>> $('.menu li:nth-child(2n)')
[li#li2, li#li4, li#li6]
>>> $('div')
[div#div1, div#div2, div#div3, div#div4, div#div5, div#div6, div#div7, div#div8, div#div9, div#div10]
>>> $('div').size()
10
>>> $('div:nth-child(3)')
[div#div3, div#div6]
>>> $('div:nth-child(3n)')
[div#div3, div#div6, div#div9]
#correct
>>> $('div:nth-child(5)')
[div#div8]
#wrong, needed #div5
>>> $('div:nth-child(2)')
[div#div1, div#div5]
#wrong, needed #div2
>>> $('div:nth-child(1)')
[div#div2, div#div4]
#wrong, needed #div1
>>> $('div:nth-child(2n)')
[div#div1, div#div5, div#div7, div#div9]
#wrong, neeeded #div2 #div4 #div6 #div8 #div10
>>> $('div:nth-child(n)')
[div#div1, div#div2, div#div3, div#div4, div#div5, div#div6, div#div7, div#div8, div#div9, div#div10]
#correct

the implementation of ":nth-child" selector works fine on li elements, but gives the wrong results on div elements. the bug?

[guest]

and more tests

>>> $('div div')
[div#div2, div#div4, div#div5, div#div6]
#correct
>>> $('div div:nth-child(2)')
[div#div5]
#correct
>>> $('div div:nth-child(2n)')
[div#div5]
#correct
>>> $('div:nth-child(2n) div')
[div#div2]
#wrong, needed div4 div5 div6

[guest]

no i`m wrong

>>> $('div div:nth-child(2)')
[div#div5]

correct div4 is the second child

>>> $('div div:nth-child(2n)')
[div#div5]

correct div4 and div6 are the second and fourth

[flesler]

So... it works correctly ? shall I close ?

[guest]

No, I don`t think so, the problem was not solved. I try to experiment with child ul-li-ul-li and div-div-div elements. And the problem is that for example "div:nth-child(1)" matches to each first div in the parent div( and so on), but need to match the first div in flat list of divs.

problem not only with tree of tags. For example, If i mark div1, div5, div8 with class="marked". and try to get one of the "div.marked", the result was wrong. $('div.marked:nth-child(1)') returns nothing, but must div1 $('div.marked:nth-child(2)') returns [div1,div5], but must only div5 $('div.marked:nth-child(3)') returns nothing, but must div8 $('div.marked:nth-child(5)') returns div8, but must nothing.

my first guess-work that jquery count nth-child not from matched elements, but from the child index of the parent element. In the example above div8 is the 5 child in the body element.

sorry for my english, if you wish I try to describe this problem more exactly, and write the tests.

[guest]

Hm, i read documentation ​http://www.w3.org/TR/css3-selectors/ more thoroughly. And i think that i make a mistake. To match one of the div i must use :nth-of-type pseudo-class. But juery seems to not support :nth-of-type. So sorry for the noise, and please close the ticket.

P.S. while googling i found that jquery support :eq pseudo-class which is exactly that i need.

P.S. Should i create enhancement ticket about supporting :nth-of-type in jquery?

[flesler]

That's what I was about to say, nth-child isn't relative to the collection, but to the actual siblings.

You can create a ticket for that if you want.

I'll close now.