title: Adding a Space when using addClass and variables using jQuery
body: <p>I have jQuery read some text then add a class based on the value of this text. (The text read is rendered by my CMS). </p>
  
  <p>The HTML Looks like this: </p>
  
  <pre><code>&lt;ul class="zoneSubscriptions"&gt;
   &lt;li&gt;
     &lt;ul&gt;
        &lt;li class="zoneName"&gt;&lt;a href="#"&gt;Professional&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;Never&lt;/li&gt;
     &lt;/ul&gt;
   &lt;/li&gt;
   &lt;li&gt;
     &lt;ul&gt;
       &lt;li class="zoneName"&gt;&lt;a href="#"&gt;RTTM&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;Never&lt;/li&gt;
     &lt;/ul&gt;
   &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I want to read the text of <code>class="zoneName"</code>and add a class based on this.</p>
  
  <p>JS to do this: </p>
  
  <pre><code>$(function() {
     var zone = $( ".zoneName" ).text();
     $( "#zones" ).addClass( zone );
  });
  </code></pre>
  
  <p>This works without issue, however, I need it to add two classes, <code>Professional</code> and <code>RTTM</code>. What it adds is <code>ProfessionalRTTM</code>. </p>
  
  <p>My question is how would I add the classes while keeping a space between the words? </p>
  
  <p>In other words it should render like this: <code>class="Professional RTTM"</code> <em>not</em> <code>class="ProfessionalRTTM"</code></p>
  
  <p>Note: In my example there are two "zoneName"s. There could be anywhere from 1 to 5 or more when used live.  </p>