Bug Tracker

Opened 11 years ago

Closed 11 years ago

#3132 closed bug (invalid)

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 (852 bytes) - added by guest 11 years ago.

Download all attachments as: .zip

Change History (7)

Changed 11 years ago by guest

Attachment: bug1.html added

comment:1 Changed 11 years ago by 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

comment:2 Changed 11 years ago by 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

comment:3 Changed 11 years ago by flesler

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

comment:4 Changed 11 years ago by 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.

comment:5 Changed 11 years ago by 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?

comment:6 Changed 11 years ago by flesler

Resolution: invalid
Status: newclosed

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.

Note: See TracTickets for help on using tickets.