Question

Basically the question is self explanitory. I can’t figure out how to combine small snippets of javascript rather than having two separate files.

The two codes are :

$(function(){
    $('.navbar li').each(function(){
      if(window.location.href.indexOf($(this).find('a:first').attr('href'))>-1)
        {
      $(this).addClass('active').siblings().removeClass('active');
        }
    });
});

$(function(){
    $('.dropdown-menu li').each(function(){
      if(window.location.href.indexOf($(this).find('a:first').attr('href'))>-1)
        {
      $(this).removeClass('active')
        }
    });
});

Another question, is the first $(function() necessary?

Thanks for you help.

Answer 1

You can make it like this:

$(function(){
    $('.navbar li, .dropdown-menu li').each(function(){
      if(window.location.href.indexOf($(this).find('a:first').attr('href'))>-1)
        {
            if($(this).parents(".navbar").length > 0)//this is to figure out if we are working with LI inside .navbar or not.
                $(this).addClass('active').siblings().removeClass('active');
            else
                $(this).removeClass('active')

        }
    });
});

Functions are almost equal, except that you need to detect if you are working with LI from .navbar or not to select corect removeClass code.

Also, in your code first $(function() is necessary. Otherwise code inside it could be started before document is loaded. But you may put both pieces of code inside one $(function()