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的表的内容为每个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不存在且你想创建一个新的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");
});

小提琴：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();

获取元素并附加到新div

2 个答案: