• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Question about jQuery :first selector

 
Sheriff
Posts: 3063
12
Mac IntelliJ IDE Python VI Editor Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I'm running through the jQuery Selector Lab Page from Bear's jQuery In Action, 2nd Ed.. (Source available here: http://www.manning.com/bibeault2/jqia2.source.zip ) Basically, the right half of the page is a sample web page, and the left half lets you type in jQuery selectors that draw red boxes around the content they match in the right half.

The sample page contains an unordered list, with two list items, each of which itself contains an unordered list with multiple items. So something like:



When I type in a selector "li li", I get all six fruits and vegetables highlighted as I expected, but when I type in "li li:first", I only get "Apple". The selector "li li:nth-child(1)" though gives me both "Apple" and "Asparagus". Is this a jQuery bug, or am I thinking of it wrong?
 
whippersnapper
Posts: 1843
5
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
:first matches a single element. So "li li:first" is giving you the first "li" that is a descendant of an "li".

To get elements that are the first child of their parent, you can use :nth-child(1), as you pointed out, or :first-child.

http://api.jquery.com/first-selector/
http://api.jquery.com/first-child-selector/
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Magic Mike is correct.

Another way to think of it is to envision that the base selector creates a set of matching elements; the :first filter then selects the first of that set. So it will always result in a single match.

:first has nothing at all to do with order within the DOM, but order within the matched set.
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
This likely means I'll need to beef up the description of this and related filters in the 3rd edition.
 
Greg Charles
Sheriff
Posts: 3063
12
Mac IntelliJ IDE Python VI Editor Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Oh, well, descriptions can never be so beefy that some moron somewhere still won't misread them. I didn't even notice there were both :first and :first-child filters.
 
Don't get me started about those stupid light bulbs.
reply
    Bookmark Topic Watch Topic
  • New Topic