Question

I’m having problems with selectors in jQuery. Or (what I don’t think) with my jQuery code.

Let me say about my problem.
I have a Rails project and a I want to insert in my menu, the class “active” if the current page is same at the menu.

For example:

Current page: Posts
My menu:

• Pages (class: none)
• Users (class: none)
• Posts (class: “active”)
• Blablabla …

My HTML/Rails/jQuery code (if you’re a Rails developer, this is my layout):

Menu:

<ul id="nav">
  <li id="dashboard"><%= link_to "Dashboard", admin_index_path %></li>
  <li id="notes"><%= link_to "Notes", admin_notes_path %>
   <ul>
    <li><a href="#">List notes</a></li>
    <li><a href="#">Add note</a></li>
   </ul>
  </li>
  <li id="projects"><a href="#">Projects</a>
   <ul>
    <li><a href="#">List projects</a></li>
    <li><a href="#">Add project</a></li>
   </ul>
  </li>
  <li id="users"><a href="#">Users</a></li>
</ul>

Script:

<script>
 $("#hld #wrapper #header #nav li").addClass(function() {
   var addedClass;

   if ($(this).attr('id') === "<%= content_for(:title).downcase %>") {
    return "active";
   }

   return addedClass;
 });
</script>

<!--[if IE]><script type="text/javascript" src="/assets/excanvas.js"></script><![endif]-->  
<script type="text/javascript" src="/assets/jquery.js"></script>
<script type="text/javascript" src="/assets/jquery.img.preload.js"></script>
<script type="text/javascript" src="/assets/jquery.filestyle.mini.js"></script>
<script type="text/javascript" src="/assets/jquery.wysiwyg.js"></script>
<script type="text/javascript" src="/assets/jquery.date_input.pack.js"></script>
<script type="text/javascript" src="/assets/facebox.js"></script>
<script type="text/javascript" src="/assets/jquery.visualize.js"></script>
<script type="text/javascript" src="/assets/jquery.visualize.tooltip.js"></script>
<script type="text/javascript" src="/assets/jquery.select_skin.js"></script>
<script type="text/javascript" src="/assets/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="/assets/ajaxupload.js"></script>
<script type="text/javascript" src="/assets/jquery.pngfix.js"></script>
<script type="text/javascript" src="/assets/custom.js"></script>

Look for the script and there’ll have my script in jQuery of course.
So, what’s the problem?

Thanks for helping, I tried to be clear.
Lucas Moreira.

Answer 1

As Jfriend00 pointed out, your selector is unnesscesarily long. '#nav li' will suffice.
Better yet, since you are only (presumably) looking for a direct child of #nav use '#nav > li'.

Also (someone please correct me if I’m wrong) but I think your script should go below where you load the external scripts. Trying to use JQuery before its loaded may cause problems 😉