title: How to .slice changing parts of a string in jQuery
body: <p>I have several divs that use bootstrap Grid system to allow users of the site to "zoom" content. 
  In this example with the <code>class="abcd b1 col-lg-6"</code> everything works fine.
  But then I have my <code>b1</code> part of the classes.. it will go up beyond <code>b10</code>, which makes my code no longer work. 
  I have tried to change the code so it would read from right to left... but then when the <code>col-lg-6</code> becomes <code>col-lg-10</code> it no longer works either.</p>
  
  <p>So my question: is there a better way to .slice the code so it will work even when my classes length changes?</p>
  
  <pre><code>&lt;div id="col" class="abcd b1 col-lg-6"&gt; //the div                   
      &lt;div class="tn bg1"&gt; 
          &lt;div class="ca"&gt;              
              &lt;div class="bp"&gt;
  
                  &lt;button type="button" id="plus" class="btn" data-toggle="tooltip" data-placement="left" title="Bigger Size"&gt;&lt;/button&gt; //the button
  
                  &lt;button type="button" id="minus" class="btn" data-toggle="tooltip" data-placement="left" title="Smaller Size"&gt;&lt;/button&gt;
  
              &lt;/div&gt;   
          &lt;/div&gt;&lt;!--ca--&gt;                             
      &lt;/div&gt;&lt;!--tn--&gt;            
  &lt;/div&gt;&lt;!--col--&gt;
  
  &lt;!--Plus Button--&gt;
  </code></pre>
  
  <pre class="lang-jquery prettyprint-override"><code>var className = ('col-lg-');       //make className = "col-lg-"
  
  $('button#plus').click(function() {   //find button#plus and add clickfunction on it.
      $this = $(this).closest('div#col');   //find the div that shall change on click, closest div with id=col
  
      var counter = $this.attr('class').split(className)[1];  //get the last section of the class. class "col-lg-6" will set the counter to = 6
      var classList = $($this).attr('class').split(/\s+/);    //get all the classes of that div, in an objekt array stored in "classList3"
      var classString = classList.toString();                  //make that objekt array into a string. classstring = "abcd,b1,col-lg-6"
      var oldClass = classString.slice(8);                    //slice out the part i want. oldClass = "col-lg-6"
      var nextNum = 1;
  
      if (counter != '')                   //if the counter has already started
          nextNum = parseInt(counter) + 2;     //add +2 on click
  
      if (counter &lt; 12) {                   //if counter are less then 12
          $this.removeClass(oldClass).addClass(className + nextNum);    //Remove class "col-lg-6" (or what ever the number are at the moment)
      }
      else {                               //if counter are bigger or = 12
                                           //do nothing
      }
  })
  </code></pre>