只使用jquery移動一個元素自己的標題

我有這塊Jquery代碼抓住表中的標題並將其移動到第一個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>

非常感謝！

來源

2012-02-10 Sophie S

我相信這可以實現您正在尋找的東西。這會將標題移動到item容器的第一個元素。

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

來源

2012-02-10 18:27:59

感謝您的回覆隊友。基本上我嘗試過，但它似乎把「泰特現代」作爲每一行的標題。我需要的是第一行僅顯示「Tate Modern」，第二行僅顯示「血兄弟」等。數據正從外部數據源中提取，因此我無法直接編輯html。希望清理東西 – 2012-02-10 18:33:44

根據您的原始標記編輯我的回覆 – 2012-02-10 19:03:10

感謝隊友，像一個魅力工作！欣賞它！ – 2012-02-13 09:40:37

只使用jquery移動一個元素自己的標題

回答

相關問題