Consider an unordered list filled with ten or so list-items. In this video, I’ll show you exactly how to individually select each one of them. We’ll be using advanced selectors, including a touch of X-Path.
Day 4: Advanced Selectors
- Subscribe to the ThemeForest RSS Feed for more daily web development tuts and articles.
segen
November 26th, 2008
this jQuery looks now so easy, tnx Jeff!
MKL
November 26th, 2008
Thanks so much! Looking forward to future tutorials and cool ways to implement the selectors.
Titus
November 27th, 2008
Thanks for these tuts, they are great.
Aman Dhingra
November 27th, 2008
this is really nice and makes jquery so easy. keep’m coming. and thanks alot for wonderful jquery series.
Andris
November 27th, 2008
Just wanted to thank you for your effort in teaching us jQuery. It helps me a lot.
chris simpson
November 27th, 2008
Really enjoying this series Jeffery. By combining the knowledge from all the screen casts i have managed to construct some cool degrabable navigation menus.
i made some normal styles for no script users, but used jquery to addclass to ’slideDown’ any li>ul tags. This slides down any submenus, and just looks amazing
one question: how to you get jquery to cancel the default command of a link? eg i want a login box to fadeIn, from an anchor tag. for users who dont have javascript enabled i want the link to point to /login i changed the ‘#’ to /login but now even with javascript enabled the page reloads to /login, and doesnt execute the jquery. hope that makes sense?
Cheers again!
chris simpson
November 27th, 2008
^^ duh. i just needed to return false. oops
Jeffrey
November 27th, 2008
Yep!
return false;
Jeffrey
November 27th, 2008
Thanks everybody. These videos are 100% for you, so feel free to request a tutorial. I’m not working from a lesson plan - or anything like that.
Bennie Mosher
November 27th, 2008
Jeffrey,
According to the jQuery documentation, in order to determine when the document is ready it states to use this:
$(document).ready(function(){
// Your code here
});
I was wondering how come you are doing it the way you are doing it with the function() command? Can you please elaborate. Here is the link in which I found this information:
http://docs.jquery.com/How_jQuery_Works#.24.28document.29.ready.28function.28.29.7B.7D.29.3B
Thank you.
kaly
November 27th, 2008
Hi Jeffrey,
You way to gives us the knowledge is awesome. Can you please tell me where I will find all selectors and the jquery commands?
Thanks
Kaly
Eduardo
November 27th, 2008
This is more a CSS tutorial than a jQuery, isn’t it?
“nth-child” and “even/odd” only exixts in CSS3, am I right? if this is correct will all these selectors work on all the browsers?
Jeffrey
November 27th, 2008
@Bennie - The two ways are identical to each other. Mine is simply the shorthand - which is the most common.
You can use either method though.
@Eduardo - The jQuery library implemented these CSS3 selectors. That’s what is so wonderful. These selectors will work on all browsers.
@Kaly - I’ll look for some good links and send them your way.
Eduardo
November 28th, 2008
@Jeffrey - pretty impressive!
@Kaly - I recommned this book: cssmastery.com {it’s a website}
Really great stuff!
Patareco
November 29th, 2008
This series are being incredibly useful for me who is trying to learn JQuery. Thank you very much!
Shaun
December 6th, 2008
How would you select more than one item? For instance if I wanted the first 3 list items to be styled differently?
Jeffrey
December 6th, 2008
@Shaun - You would use “:not”. For example, if I had four list items, and I wanted to only style the first three..I could do:
$(function() {
$(’ul li:not(:last)’).css(’background’, ‘yellow’);
});
This is saying, “Get all of the list items, but NOT the very last one, and change the background to yellow.
Shaun
December 7th, 2008
Thanks for the reply Jeffrey. What if say you had 7 list items and only wanted to target the first 3, could you still use the :not function?
Steve
December 10th, 2008
I can’t get the list items to turn red? I was good up till now, lol! What’s wrong with my code?
$(function() {
$(’li’).css(’color’, ‘red’);
});
Steve
December 10th, 2008
OK, this has to be the oddest thing ever. I took the javascript I had in the external file, put it inline, and it worked. So I deleted the external file name call and it stopped working….
…what?
Put it back in, didn’t work still! Took out the inline code, and it worked! (facepalm)
brent
December 10th, 2008
thanks Jeffery, keep em coming!
brent
@
mimoYmima.com
Scott
December 11th, 2008
@Steve
Make sure that your file paths are correct when linking your script.js file as well as the syntax. Here is my script call for an externally created script.js file
make sure it is in the header section of your index.html file
I encounter weird errors like this often and sometime I simply have to wipe all the code and start from the beginning. Try what I told you and if that is still not working start all the way over by creating a new script.js file put it at the same level as your index.html is in whatever file you put it in.
Then make sure your syntax is correct for everything. I hope that helps it is the best I could come up with.
Christopher Sanders
December 16th, 2008
I love this. I am going to do all of them. I am a Jr Web developer so this is good for me to learn.
savage
December 17th, 2008
i also second shaun’s second comment .. also, wouldn’t doing
$(’li>a’).addClass….
be the same as
$(’li a’).addClass… ??
would there be a better time to use one over the other ?
cheers, great tuts by the way !!
Tati Carvalho
December 21st, 2008
Great Tutorials! Thanks! I´m having fum learning jQuery this way…
@Brent: LOVED your site! Beautiful “song introduction”!!!
Cheers to u all!
Brian
December 22nd, 2008
I am also stuck. I am typing in the same code as the tutorial, and my list is not changing to red. My code is
$(function() {
$(’li’).css(’color’, ‘red’);
});
Brian
December 22nd, 2008
Firbug keeps telling me $ is not defined in $(function() {
Jeffrey
December 22nd, 2008
Brian - That usually means that you’re not referencing your jQuery file correctly. Check the path.
cristian
January 13th, 2009
dude thanks so much I am learning thanks to you!
simpson
January 18th, 2009
i have watched this over and over again, followed the advice in comments, rebuilt both the html and js files from scratched, put them all in the same root, deleted the root folder, made a new one and I CANNOT get that list to turn red! Pleas help as I am desperate to continue with this
gujjuri
January 25th, 2009
Jeffrey u are the best……
creat3tertiary
January 28th, 2009
best video so far. selectors = where the magic happens
ibrahim
January 29th, 2009
These are fantastic…. keep up posting:)
weezer
February 3rd, 2009
Fantastic tutorial…
I have one question: every time I click on on my page, page is “refreshed”, not for real, but I’m shifted to the top of the page. How can I prevent it?
Thanks!
weezer
February 3rd, 2009
…my mistake… after return false is needed… now page doesn’t go to the top.
Saurabh
February 5th, 2009
Hi Jeffrey
m using .aspx page not HTML page
n m facing some problems
1.$(’li:first’).addClass(’alert’); // is not working but $(’li:last’).addClass(’alert’); is working fine.
2. $(’li:eq(4)’).addClass(’alert’); // is selecting the item “list 3″ not “list 5″ as u said it starts from 0
3. $(’li a[title=title]‘).addClass(’alert’); // is not working but if i $(’li a[title=title]‘).css(’color’,'red’); is working fine. i faced this problem in another example also if i set the color of anchor tag (ie. color: Red; ) in stylesheet ..then its not working.
any Ideas?
Kind Regards
Saurabh
Harsha M V
February 7th, 2009
where can i learn all the advance selectors ?
Adnan Muzzaffar
March 17th, 2009
Great Stuff Jeffery!
Thank you for all of your efforts.
Just one question, can we define a range to it?
For example if I want the links from first to fourth to be red.
Please do let me know.
Thanks mate, keep up the awesome work!
Chris
March 19th, 2009
I can’t believe how easy you have made this. I’ve been able to build Textmate snippets as I go along with you and can now just fly along in building functions.
fonso gfx
March 20th, 2009
These JQuery tuts are awesome, I’ve been looking for these kind of tuts for a long time..
Mickey Hoang
April 12th, 2009
Thanks
Jeoung Mi
April 17th, 2009
Thanks
indi
April 19th, 2009
thank you sooooooooo much!!!! its people like that makes me feel not so left out in the net technology
Jeremiah
May 3rd, 2009
Hey there guys, been looking for a good resource to learn some basics, from there the world is our own. You guys rock, email me if you ever need any help with anything! I would love to get involved with your blog even!
Codie
May 9th, 2009
Loving it. Thanks.
Rakesh
May 12th, 2009
Thanks dude. Grt work. I love this video.
Rakesh
May 12th, 2009
Hi Adnan Muzzaffar,
For ur Query u can use the below code
$(’li:lt(3)’).css(’color’,'red’);
it will color Red for first 3 list items.
Thanks,
Rakesh
charlie
May 15th, 2009
Thank you for the cast, I’m am following all the way through…
Podveg Razvedcheka
May 25th, 2009
There is not a complex subject. There are bad teachers. It’s very very useful video. Thanks a lot from Russia.
Altaf
June 6th, 2009
Hi jeff,
these are awesome tutorials.
But are these tutorials available for downloading? If yes than from where can i download?
basepage
June 8th, 2009
Thanks for these tuts.
Haroon
June 15th, 2009
Thanks for putting these up. really helpfull.
Cheers
myutmost
June 24th, 2009
very good. wow…thank you.