Question

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.

Before:

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

Jquery:

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

Result:

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

But what I want to HTML markup to look like:

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

Many thanks!

Answer 1

I believe this achieves what you’re looking for. This will move the heading to be the first element of the item container.

$(document).ready(function(){
    $(".table_heading", "#gvResults").each(function(){
        var $heading = $(this);
        $heading.prependTo($heading.parent());
    });
});