Bug Tracker

#3132 closed bug (invalid)

Opened July 05, 2008 06:01PM UTC

Closed July 08, 2008 01:36PM UTC

in the :nth-child selector

Reported by: guest Owned by:
Priority: major Milestone: 1.3
Component: selector Version: 1.2.6
Keywords: Cc:
Blocked by: Blocking:
Description

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?

Attachments (1)
  • bug1.html (0.8 KB) - added by guest July 05, 2008 06:02PM UTC.
Change History (6)

Changed July 05, 2008 06:28PM UTC by guest comment:1

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

Changed July 06, 2008 02:32PM UTC by guest comment:2

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

Changed July 07, 2008 11:42PM UTC by flesler comment:3

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

Changed July 08, 2008 06:33AM UTC by guest comment:4

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.

Changed July 08, 2008 07:16AM UTC by guest comment:5

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?

Changed July 08, 2008 01:36PM UTC by flesler comment:6

resolution: → invalid
status: new → closed

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.