title: How to add class based on location and corresponding href?
body: <p>I have a menu with a simple markup , and my aim is to add a class to the menu <code>&lt;li&gt;</code> item automatically by the name of the current page ....</p>
  
  <p>The relevant Markup is :</p>
  
  <pre><code>    &lt;ul class="sub-menu"&gt;
          &lt;li &gt;    
              &lt;a href="page_example_one.html"&gt;
  
              &lt;i class="icon-time"&gt;&lt;/i&gt;
  
              Timeline&lt;/a&gt;    
          &lt;/li&gt;    
          &lt;li &gt;    
              &lt;a href="page_example_two.html"&gt;
  
              &lt;i class="icon-cogs"&gt;&lt;/i&gt;
  
              Page Two&lt;/a&gt;    
          &lt;/li&gt;
  .... Many other elements 
      &lt;/ul&gt;
  </code></pre>
  
  <p>What I need to get is very simple , when I am on a certain page ( assume page_example_one.html
  ) I would need the corresponding <code>&lt;li&gt;</code> element to have an additional class like so</p>
  
  <pre><code>&lt;li class="active"&gt;
  
      &lt;a href="page_example_one.html"&gt;
  
      &lt;i class="icon-time"&gt;&lt;/i&gt;
  
      Timeline&lt;/a&gt;
  
  &lt;/li&gt;
  </code></pre>
  
  <p>I tried to do that with jQuerylike so :</p>
  
  <pre><code>jQuery(document).ready(function() {
  
       // Get the current page name ( pathname)
              var currentUrl =  jQuery(location).attr('pathname');
  
              // Get the element ( try at least )
              var currentMenuItem = jQuery("sub-menu li a[href='" + currentUrl + "']");
  
              // Add the class
              currentMenuItem.addClass("active");
  
                  //Tried also something like this : 
                  // jQuery("sub-menu li a[href='" + currentUrl + "']").find('a').addClass("active");
  
  
          });
  </code></pre>
  
  <p>both the methods above failed for me - ( the commented one with VAR , and the concatenated )
  But because my JS skills are very low, I can not really see what I am doing wrong ( probably somehting really obvious to someone who knows JS )</p>
  
  <p>After resolving this issue, I would also like to know how to add spans or classes also to a parent menu item ( in case of sub menu ) based on the current page link ...</p>