jqueryのみを使用して要素の見出しを移動する

Question

テーブル内の見出しを取得し、最初のimgタグの上に移動するJqueryコードがあります。それは動作しますが、個々の行の見出しの代わりに、テーブルのすべての単一見出しを取得するようです。前

：

<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"); 
}) 

結果：

<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> 

しかし、私が見えるようにHTMLマークアップしたい：

<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> 

感謝を！

Answer 1

私はこれがあなたが探しているものを達成すると信じています。これにより、見出しはitemコンテナの最初の要素になります。

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