title: jQuery - Select second word and warp the text
body: <p>I have a menu list like this:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li class="but"&gt;&lt;a href="#"&gt;ONE WORD&lt;small&gt;Other words here&lt;/small&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li class="but"&gt;&lt;a href="#"&gt;ONE WORD&lt;small&gt;Other words here&lt;/small&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li class="but"&gt;&lt;a href="#"&gt;ONE WORD&lt;small&gt;Other words here&lt;/small&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li class="but"&gt;&lt;a href="#"&gt;ONE WORD&lt;small&gt;Other words here&lt;/small&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>How can I automatically select the second word from li.but and warp it into a span like this:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li class="but"&gt;&lt;a href="#"&gt;ONE &lt;span&gt;WORD&lt;span&gt;&lt;small&gt;Other words here&lt;/small&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li class="but"&gt;&lt;a href="#"&gt;ONE &lt;span&gt;WORD&lt;span&gt;&lt;small&gt;Other words here&lt;/small&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li class="but"&gt;&lt;a href="#"&gt;ONE &lt;span&gt;WORD&lt;span&gt;&lt;small&gt;Other words here&lt;/small&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li class="but"&gt;&lt;a href="#"&gt;ONE &lt;span&gt;WORD&lt;span&gt;&lt;small&gt;Other words here&lt;/small&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Thank you very much!</p>