Can I rewrite Javascript without using 'this'?

Question

I'm very new to JS and I'm having trouble getting this to work.

Here is my code

jQuery('ul.menu li').each(function() {
jQuery(this).removeClass('current-menu-item');
jQuery(this).removeClass('current_page_item');
});
jQuery(this).parents('li').addClass('current_page_item');
jQuery(this).parents('li').addClass('current-menu-item');

Now what this should be doing is remove the highlight from one link on a navigation menu, and highlighting the one thats been clicked (I have an AJAX implementation).

For some reason it isn't doing anything. I have a feeling it is due to 'this' is there another way of structuring this code so I can work out if the code is wrong, which I don't believe it to be, or because of 'this'?

EDIT:

Apologies, it seems I haven't given enough information. I'm using the Twenty Fourteen wordpress theme but I'm serving the pages with AJAX.

http://twentyfourteendemo.wordpress.com/

I have the code being applied globally (I have other code in the same place to toggle the navigation once clicked (on mobile) and that works fine)

I have the menu at the top (without any dropdowns, just links). I can't give a link as it's not external currently. Should my code be working to change this?

As a few people have commented "What is 'this'" I feel I've completely missed something.

Answer 1

You don't need loop each item to do a remove class one by one, this is more easy :

jQuery('ul.menu li').removeClass('current-menu-item').removeClass('current_page_item');

Or (it's the same) :

jQuery('ul.menu li').removeClass('current-menu-item current_page_item');

But I don't understand what is this 'this' :

jQuery(this).parents('li').addClass('current_page_item');
jQuery(this).parents('li').addClass('current-menu-item');

Do you mean :

jQuery('ul.menu li').addClass('current_page_item current-menu-item');

Or if you are on an event listener (like click, as @Daniel Sanchez feel on comment) you just need to do :

jQuery('ul.menu li').click(function(){   
  // Remove class on each item  
  jQuery('ul.menu li').removeClass('current-menu-item current_page_item');

  // Add class for this one    
  jQuery(this).addClass('current_page_item current-menu-item'); 
})

Answer 2

It's not entirely clear what you are trying to do but the code can be simplified somewhat:

jQuery("ul.menu li a").click(function(){
    jQuery('ul.menu li').removeClass('current-menu-item current_page_item');
    jQuery(this).parent('li').addClass('current_page_item current-menu-item');
});

http://jsfiddle.net/re3hjzyf/

Answer 3

Yes, by replacing this with 'ul.menu li' .

So the code would be like this

jQuery('ul.menu li').each(function() {
   jQuery('ul.menu li').removeClass('current-menu-item')
                       .removeClass('current_page_item');
});
// not sure what the following code is referencing too
// it is outside the bounds of .each() function.
jQuery(this).parents('li').addClass('current_page_item');
jQuery(this).parents('li').addClass('current-menu-item');

what is this

When working with JavaScript and many Object Oriented programming languages the this keyword is used to refer to the current context that the programmer is working with. You're currently referencing to the ul.menu li element so by using this you make a call to the element that is selected in the .each() function.

You can replace it by using the element selector that you used in the each() function.

Answer 4

jQuery('.current-menu-item').removeClass('current-menu-item');
jQuery('.current_page_item').removeClass('current_page_item');

Here I am making the assumption that only one item will ever have those classes as it would denote which menu item is currently selected. The best way to select it is then to search for the class you want to remove. (If those classes always go together, you could also remove both on the same line, although then you might want to consider whether you actually need both.

jQuery('ul.menu li').on("click", function() {
jQuery(this).addClass('current_page_item').addClass('current-menu-item');
}

You can only use "this" as an argument for the selector when "this" has a value (ie : inside an each loop or inside on. In this case I am using the on() function to apply the function which adds the class to any of the list items which gets clicked on.

Merging the two you would then end up with :

jQuery('ul.menu li').on("click", function() {
    jQuery('.current-menu-item').removeClass('current-menu-item');
    jQuery('.current_page_item').removeClass('current_page_item');
    jQuery(this).addClass('current_page_item').addClass('current-menu-item');
}