我无法更改此页面的基本 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>
使用这个:
$("#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/
此函数应获取给定部门 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();