title: Wrap a span around link text with jQuery
body: <p>I would like to dynamically wrap the text in my menu links with spans if the parent element has a certain class.</p>
  
  <p>What I have:</p>
  
  <pre><code>&lt;div class="mt-menu-container block"&gt;
      &lt;ul id="menu" class="sf-menu sf-js-enabled"&gt;
          &lt;li&gt;&lt;a href="#"&gt;MenuItem&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I want to do is, if the parent element on line 1 has the class "block" I would like the text "MenuItem" in the  to be wrapped with spans so I get something like this:</p>
  
  <pre><code>&lt;div class="mt-menu-container block"&gt;
      &lt;ul id="menu" class="sf-menu sf-js-enabled"&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;MenuItem&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I tried is (Please don't laugh):</p>
  
  <pre><code>// Menu Block Style
  if (jQuery('mt-menu-container.block')) {
     $('#menu &gt; li &gt; a').each(
         function(){
             $(this).wrap('&lt;span&gt;&lt;/span&gt;');
         });
  }
  </code></pre>
  
  <p>Which didn't work since it's probably wrong on so many levels but you'll get the gist of it</p>