Get element and append to new div

Question

I can not change the basic HTML of this page and the structure of it doesn't allow me to get and append some items i need. Here is the basic 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>

I need to pull the td.fname img in td#division00 and place in another location on the page, but due to the html layout , the td id for divsion00 does not wrap the contents of the table that include the assigned fname for each divsion. I have tried this, but does not work.

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

When i use a more general setting like below i get all the td.fname images , but i only wish to get the ones listed for each division separately. Anyone know of a way to pull just the group listed under each #division00 , #division01 , #division02

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

Answer 1

Use this:

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

if #newdiv doesn't exist and you want to create a new div:

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

If you need all images for the division:

$("#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

This function should get all the image rows for a given division 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;
}

You can then move the <img> elements for a division like this:

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

You can then remove the now empty rows like this:

$imageRows.remove();