title: Adding class based on contents of link text
body: <p>I found a nice <a href="https://stackoverflow.com/a/1624014/819276">snippet</a> here on Stack which grabs the text from a link and appends it to the a tag as a class: </p>
  
  <pre><code>$('a.nav').each(function() {
  
      // add class with name of the link's text
      $(this).addClass($(this).text());
  });
  </code></pre>
  
  <p>It works great except that I have a list of linked search results that output <code>(numbers), e.g. (19)</code> after the link text. </p>
  
  <p>So the structure of my HTML after the JQuery above is applied is as such:</p>
  
  <pre><code>&lt;li&gt;&lt;a class="Basic page (1)" href="#"&gt;Basic page (1)&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a class="Blog (19)" href="#"&gt;Blog (19)&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a class="News (4)" href="#"&gt;News (4)&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>As you can see, it's not ideal. If possible, I'd like to at least get rid of the numbers in parenths i.e. <code>(1)</code>, <code>(19)</code> etc... and then put dashes and with the text and lower case. Note this is for a faceted search result so the links will never all be together or in the same order.  I am simply trying to apply dynamic classes based on the link text name so I can do other things down the road in a theming realm. </p>
  
  <p>so this:</p>
  
  <pre><code>&lt;li&gt;&lt;a class="Basic page (1)" href="#"&gt;Basic page (1)&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>... would become this:</p>
  
  <pre><code>&lt;li&gt;&lt;a class="basic-page" href="#"&gt;Basic page (1)&lt;/a&gt;&lt;/li&gt;
  </code></pre>