How to wrap all text into unique span tag?
<p>I want to wrap all body text(each word) into unique span tag.</p>

<p><strong>Before wrap</strong> :</p>

<pre><code>&lt;body&gt;    
&lt;div&gt;
  &lt;p&gt;word word &lt;/p&gt;
  &lt;div&gt;word word&lt;/div&gt;
    &lt;ul&gt;
        &lt;li&gt;word word&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/ul&gt;
  &lt;p&gt;word word &lt;strong&gt;word&lt;/strong&gt; &lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p><strong>After wrap</strong> :</p>

<pre><code>&lt;body&gt;
&lt;div&gt;
    &lt;p&gt;&lt;span id="1"&gt;word&lt;/span&gt; &lt;span id="2"&gt;word&lt;/span&gt; &lt;/p&gt;
    &lt;div&gt;&lt;span id="3"&gt;word&lt;/span&gt; &lt;span id="4"&gt;word&lt;/span&gt;&lt;/div&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;span id="5"&gt;word&lt;/span&gt; &lt;span id="6"&gt;word&lt;/span&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/ul&gt;
    &lt;p&gt;&lt;span id="7"&gt;word&lt;/span&gt; &lt;span id="8"&gt;word&lt;/span&gt; &lt;strong&gt;&lt;span id="9"&gt;word&lt;/span&gt;&lt;/strong&gt; &lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>I tried this in jquery but it doesn't give what i expect</p>

<pre><code>$('body *').each(function(){

        var words = $(this).text().split(" ");

            $(this).empty();
            $t=$(this);
            $.each(words, function(i, v) {
                $t.append('&lt;span&gt;'+v+'&lt;/span&gt;');
            });

});
</code></pre>

<p>Thanks in advance,
Logan</p>
