javascript - 获取元素并追加到新的 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#division00 中拉出 td.fname img 并放置在页面的另一个位置，但是由于 html 布局，divsion00 的 td id 不包含包含分配的 fname 的表的内容对于每个部门。我试过这个，但不起作用。

<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 不存在而您想创建一个新的 div:

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/