Please help jQuery execute only for the first paragraph
<p>Some jquery code below works fine just like adding element inside the paragraph.
My problem is it's only displaying the first paragraph and repeated number of times of how many number of paragraph in the body. Just check my code below.</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt; 
&lt;head&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;body&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function() {
$('p.content').each(function() {
var content = $(this).html();    
var beforeContent = "&lt;em&gt;";
var afterContent = "&lt;/em&gt;";
$(this).html(beforeContent+content+afterContent)
});
})
&lt;/script&gt;
&lt;p class="content"&gt;Hex value of white is #FFFFFF;&lt;/p&gt;
&lt;p class="content"&gt;Hex value of black is #000000;&lt;/p&gt;
&lt;p class="content"&gt;Hex value of blue is #0000FF;&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
