Получить элемент и добавить к новому div

Question

Я не могу изменить основной HTML этой страницы, и его структура не позволяет мне получать и добавлять некоторые элементы, которые мне нужны. Вот основной HTML

<table id="standings"> 
<caption><span>League</span></caption> 
    <tbody> 
    <tr> 
    <td id="division00"></td> 
    </tr> 

    <tr> 
     <td class="fname"> 
     <img src="/UR1.png"> 
     </td> 

    </tr> 

    <tr> 
     <td class="fname"> 
     <img src="/UR2.png"> 
     </td> 

    </tr> 


    <tr> 
    <td id="division01"></td> 
    </tr> 

    <tr> 
     <td class="fname"> 
     <img src="/UR3.png"> 
     </td> 

    </tr> 

    <tr> 
     <td class="fname"> 
     <img src="/UR4.png"> 
     </td> 

    </tr> 


    <tr> 
    <td id="division02"></td> 
    </tr> 

    <tr> 
     <td class="fname"> 
     <img src="/UR5.png"> 
     </td> 

    </tr> 

    <tr> 
     <td class="fname"> 
     <img src="/UR6.png"> 
     </td> 

    </tr> 

    </tbody> 
</table> 

Мне нужно тянуть td.fname IMG в TD # division00 и место в другом месте на странице, но из-за макета HTML, то тд идентификатор для divsion00 не обернуть содержимое таблицы, которая включает назначенное имя для каждого divsion. Я пробовал это, но не работает.

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#standings #divsion00 td.fname').appendTo('#newdiv'); 
}); 
</script> 

Когда я использовать более общие настройки, как показано ниже, я получаю все td.fname изображения, но я только хочу, чтобы получить те, перечисленные для каждого подразделения в отдельности. Любой знает, как вытащить только группу перечисленных под каждым # division00, # division01, # division02

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#standings td.fname').appendTo('#newdiv'); 
}); 
</script> 

Answer 1

Используйте это:

$("#division00").parent().next().find('.fname img').appendTo("#newdiv"); 

если #newdiv не существует, и вы хотите создать новый ДИВ:

var newdiv = $('<div>'); 
$("#division00").parent().next().find('.fname img').appendTo(newdiv); 
newdiv.appendTo("body"); // Or wherever you want 

Если вам нужны все изображения для разделения:

$("#division00").parent().nextAll().each(function(){ 
    if($(this).children("td[id^=division]").length) return false; 
    $(this).find('.fname img').appendTo("#newdiv"); 
}); 

Fiddle: http://jsfiddle.net/9wU7Y/

Answer 2

Эта функция должна получить все строки изображения для данного деления ID:

function getImageRows(divisionId) { 
    var $divisionRow = $('#' + divisionId).closest('tr'); 

    var $imageRows = $(); 
    for ($row = $divisionRow.next(); $row.length > 0; $row = $row.next()) { 
     if ($row.find('.fname').length > 0) { 
      $imageRows = $imageRows.add($row); 
     } else { 
      break; 
     } 
    } 
    return $imageRows; 
} 

Вы можете перемещать <img> элементы для разделения, как это:

var $imageRows = getImageRows('division00'); 
$imageRows.find('img').appendTo('#newDiv'); 

Затем вы можете удалить пустые строки следующим образом:

$imageRows.remove();