Javascript 获取元素并附加到新div

我不能改变这个页面的基本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#division 00中提取td.fname img并将其放置在页面上的另一个位置，但是由于html布局，division 00的td id没有包装包含每个division的指定fname的表的内容。我试过这个，但不起作用

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

$（文档）.ready（函数（）{
$（“#standings#division00 td.fname”）。附录（“#newdiv”）；
});

当我使用下面这样一个更一般的设置时，我会得到所有td.fname图像，但我只希望得到每个分区分别列出的图像。有没有人知道一种方法，可以将每个#分区00、#分区01、#分区02下列出的组拉出来

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

$（文档）.ready（函数（）{
$（'#standings td.fname'）。追加（'#newdiv'）；
});

使用以下方法：

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

---

Fiddle:

此函数应获取给定分区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;
}

然后，您可以移动分区的

元素，如下所示：

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

$imageRows.remove();

然后可以删除现在为空的行，如下所示：

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

$imageRows.remove();

---

您意识到没有

divisiion00

元素，有一个

i

太多了？

$（“#division00”）。最近（'tr'）。下一个（'tr'）。查找（'fname'）

在分割行之后有两行有图像。要移动两个图像，还是只移动第一个图像？如果两者都有，那么总有两个吗？或者数字会有所不同吗？泰·阿迪内奥，我打错了，并在我的帖子中更正了。我想移动每个分区的所有图像，fnames和图像是由主机站点从另一个脚本动态创建的，因此有时每个分区最多有10个图像插入，并且找不到fname图像，我已经添加了新的分区btw和Thankstrange，它在小提琴中为我工作。哦，好吧，如果这个答案对你有用的话，请随意接受另一个答案：）完美，我在寻找的，还有泰迪