title: Add Class to Parent <li> when checking a child href
body: <p>I'm using the twitter Bootstrap framework and I want to change the active link depending on the page showing. (If this is not appropriate for Stackoverflow, just delete it)</p>
  
  <p>Basic nav menu html is below.  Notice the class 'active'?  This highlights the active link.</p>
  
  <pre><code>&lt;ul class="nav"&gt;
     &lt;li class="active"&gt;&lt;a href="default.aspx"&gt;View Programs&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="addprogram.aspx"&gt;Add Programs&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="contacts.aspx"&gt;Contacts&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>jQuery Code ... I remove the class 'active' from all li tags and add it back to the li tag with the link to the page showing.</p>
  
  <pre><code>    $(document).ready(function () {
          $("ul.nav &gt; li").removeAttr("class");
          $("ul.nav &gt; li a[href*='contacts.aspx']").parent("ul.nav &gt; li").addClass("active");
      });
  </code></pre>
  
  <p>This know gives me ... </p>
  
  <pre><code> &lt;ul class="nav"&gt;
     &lt;li&gt;&lt;a href="default.aspx"&gt;View Programs&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="addprogram.aspx"&gt;Add Programs&lt;/a&gt;&lt;/li&gt;
     &lt;li class="active"&gt;&lt;a href="contacts.aspx"&gt;Contacts&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <hr />
  
  <p>This works, but is it the correct way to do it?</p>