Replace first occurance in class
<pre><code>&lt;div class="section truck edit-track truck-army truck-ambulance"&gt;&lt;/div&gt;
</code></pre>

<p>How do I replace only first <code>truck</code> to <code>truck garage-active</code>?</p>

<p>We should get this:</p>

<pre><code>&lt;div class="section truck garage-active edit-track truck-army truck-ambulance"&gt;&lt;/div&gt;
</code></pre>

<p>Not this:</p>

<pre><code>&lt;div class="section truck edit-track truck-army truck-ambulance garage-active"&gt;&lt;/div&gt;
</code></pre>

<p>jQuery <code>.addClass()</code> just adds a new class to the end of the class name, so it doesn't help - <a href="http://jsfiddle.net/xxbnt/" rel="nofollow">http://jsfiddle.net/xxbnt/</a></p>

<p>Need this for the right <strong>CSS class chaining</strong> styles.</p>
