Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Code Challenge: Using jquery to select elements

Hi guys, I am stuck on 2nd code challenge whre it asks to

"On the next line, use jQuery to select all list items (li) in an unordered list (ul) with the class of 'nav'?"

Can anyone help please? Thanks

7 Answers

Joe Bruno
Joe Bruno
35,909 Points

You didn't specify a function - I am not sure if the challenge asks you to do that; however, simply to select these items it should be:

 $(ul li .nav)

So, lets say you wanted to remove the class "nav" from all those list items. The whole function might look something like this:

 $(document).ready(function () {
     $("#button").on( "click",  function (e) {
         $("ul li .nav").removeClass("nav");
         e.preventDefault();
     });
    });

Also, if ".nav" only appeared in this ul li (and not elsewhere, or you wanted to select all instances of class ".nav" globally), you could abbreviate you selector to simply $(".nav") As far as selecting items, jQuery generally follows the same style as css. In a "real world" setting, if you wanted to know what you selector might be, the Google Chrome developer window could help a bit in telling you where you are at within the markup (on a mac, option + cmd +j), but once you get the hang of it, that will end up being too much work you will know by simply looking at the page.

James Barnett
James Barnett
39,199 Points

Joe Bruno - It's not generally a good idea to respond to a question here on the forum starting with

I am not sure if the challenge asks you to do that

Context is everything, if you haven't done that badge yet and don't feel like doing that code challenge before trying to respond to a question, just leave it for someone else.

It's very important to know the context the instructions are asked in, you don't want to confuse someone by sending them down the wrong path.

James Barnett
James Barnett
39,199 Points

@Zeeshan - The key to this question is to understand that the <ul> element has a class of nav, in other words it's <ul class = "nav">.

So the HTML would look something like this:

<ul class="nav">
  <li></li>
</ul>

Now ask youself ... what is the CSS selector I would use to select all <li>s from the above markup?

Thanks Joe Bruno and James Barnett for your help, it was one of those things which just didnt clicked for me.

In CSS i would try ".nav ul li" so I tried $(".nav ul li"); which did not work, but when I tried $("ul.nav li"); code challenge accepted it, I wont say I completely understand it but now I got another idea in my mind to try.

Thanks for your help once again much appreciated.

Meg Cusack
Meg Cusack
11,448 Points

Glad to see this question as I was having the same problem. I got the answer finally of $("ul.nav li"); What is confusing me is the spaces. It would not accept it with a space between ul and .nav. But it did take it with a space between .nav and li. He has not taught about the spaces rules. Can someone instruct me on that?

James Barnett
James Barnett
39,199 Points

Meg Cusack - JQuery selectors are just CSS selectors, so you need to recall the rules about using spaces with CSS.

Here's a refresher on when spaces are syntaxically important in CSS from CSS Tricks.

Meg Cusack
Meg Cusack
11,448 Points

Thanks, James! I will read through it. :-)