Moving an elements own heading only using jquery
<p>I have this piece of Jquery code that grabs a heading in a table and moves it above the first img tag. It works, but it seems to grab every single heading in the table, instead of the heading for each individual row.</p>

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

<pre><code>&lt;table cellspacing="0" border="1" style="border-collapse: collapse;" id="gvResults" class="daysouttable"&gt;
    &lt;tr&gt;
        &lt;td&gt;
            &lt;div class="item clearfix"&gt;
                &lt;img src="http://images.daysoutguide.co.uk/mini_6031-AttractionImage.jpg" class="first_image" /&gt;
                &lt;h3 class="table_heading"&gt;
                    Tate Modern&lt;/h3&gt;                                   
            &lt;/div&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;
            &lt;div class="item clearfix"&gt;
            &lt;img src="http://images.daysoutguide.co.uk/mini_6851-AttractionImage.jpg" class="first_image" /&gt;
                &lt;h3 class="table_heading"&gt;
                    Blood Brothers&lt;/h3&gt;                                     
            &lt;/div&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p><strong>Jquery:</strong></p>

<pre><code>$("div.item").each(function (index) {
  $('.table_heading').insertBefore("table#gvResults img:first-child");
})
</code></pre>

<p><strong>Result:</strong></p>

<pre><code>&lt;table cellspacing="0" border="1" style="border-collapse: collapse;" id="gvResults" class="daysouttable"&gt;
    &lt;tr&gt;
        &lt;td&gt;
            &lt;div class="item clearfix"&gt;
                &lt;h3 class="table_heading"&gt;
                    Tate Modern&lt;/h3&gt;
                &lt;h3 class="table_heading"&gt;
                    Blood Brothers&lt;/h3&gt;                   
                &lt;img src="http://images.daysoutguide.co.uk/mini_6031-AttractionImage.jpg" class="first_image" /&gt;
            &lt;/div&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;
            &lt;div class="item clearfix"&gt;
                &lt;h3 class="table_heading"&gt;
                    Tate Modern&lt;/h3&gt;
                &lt;h3 class="table_heading"&gt;
                    Blood Brothers&lt;/h3&gt;
                &lt;img src="http://images.daysoutguide.co.uk/mini_6851-AttractionImage.jpg" class="first_image" /&gt;
            &lt;/div&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p><strong>But what I want to HTML markup to look like:</strong></p>

<pre><code>&lt;table cellspacing="0" border="1" style="border-collapse: collapse;" id="gvResults" class="daysouttable"&gt;
    &lt;tr&gt;
        &lt;td&gt;
            &lt;div class="item clearfix"&gt;
                &lt;h3 class="table_heading"&gt;
                    Tate Modern&lt;/h3&gt;                  
                &lt;img src="http://images.daysoutguide.co.uk/mini_6031-AttractionImage.jpg" class="first_image" /&gt;
            &lt;/div&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;
            &lt;div class="item clearfix"&gt;                 
                &lt;h3 class="table_heading"&gt;
                    Blood Brothers&lt;/h3&gt;                   
                &lt;img src="http://images.daysoutguide.co.uk/mini_6851-AttractionImage.jpg" class="first_image" /&gt;
            &lt;/div&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>Many thanks!</p>
