我以前使用过这个并且没有针对div的问题,但这次我的目标是埋藏在已经在Intranet网站上很久的表中的图像。我终于找到了它的代码,并在名为$('.targetTable')
的表中添加了一个类名。现在我试图从表中提取某些元素,以显示在我的新页面上的div内。以下是从表中提取HTML的代码:
$(document).ready(function(){
$mission = $('#targetDiv');
$.ajax({
url: "http://example.com/values/values.cfm?val=commitment",
cache: false
}).done(function( html ) {
$div = $('table.targetTable', html);
$img = $div.children('tr:eq(3)').children('td').find('img').attr('src');
$mission.append('<img src="'+$img+'" />');
});
});
以下是AJAX调用提取的表:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>commitment</title>
</head>
<body>
<table border="0" style="border: 1px solid gray;" cellspacing="0" class="targetTable">
<tr style="background-color: #FFDDBB;">
<td align="center" style="padding: 8px;">
<img src="../mp_images/values/commitment_med.jpg" width="600" height="439">
</td>
</tr>
<tr style="background-color: #FFDDBB;">
<td valign="top" style="padding: 8px;">
<div style="text-align:center; letter-spacing: 4px; font-size: 140%; font-weight: bold; margin-bottom: 30px;">COMMITMENT</div>
<div style="font-family:Georgia, 'Times New Roman', Times, serif; font-size: 100%">
We recognize Commitment as a fundamental cornerstone underpinning our everyday activities. Our commitment is a steadfast devotion to our people, our licensees, and to the public to responsibly carry out the mission of the agency, unwavering from the highest standards of safety, excellence, and professionalism.
</div>
</td>
</tr>
<tr style="background-color: #FFDDBB;">
<td style="border-bottom: 1px solid gray;">
</td>
</tr>
<tr bgcolor="white">
<td align="center" colspan="3" style="padding: 8px;">
<a href="../values/values.cfm?val=Commitment" ><img src="../mp_images/values/commitment_small.jpg" border="0" /></a>
<a href="../values/values.cfm?val=Cooperation"><img src="../mp_images/values/cooperation_small.jpg" border="0" /></a>
<a href="../values/values.cfm?val=Excellence"><img src="../mp_images/values/excellence_small.jpg" border="0" /></a>
<a href="../values/values.cfm?val=Integrity"><img src="../mp_images/values/integrity_small.jpg" border="0" /></a>
<a href="../values/values.cfm?val=Openness"><img src="../mp_images/values/openness_small.jpg" border="0" /></a>
<a href="../values/values.cfm?val=Respect"><img src="../mp_images/values/respect_small.jpg" border="0" /></a>
<a href="../values/values.cfm?val=Service"><img src="../mp_images/values/service_small.jpg" border="0" /></a>
<a href="../values/values.cfm?val=Mission"><img src="../mp_images/values/Mission_small.jpg" border="0" /></a>
<a href="../values/values.cfm?val=Vision"><img src="../mp_images/values/Vision_small.jpg" border="0" /></a>
</td>
</tr>
</table>
</body>
</html>
现在,每当我定位img src时,它都会以未定义的形式返回。我的目标是错误还是其他类似doctype或CFM的兼容性?也出于某些原因,我无法弄清楚Chrome是否会引发错误。它告诉我,我的AJAX已将HTML中的所有相对路径转换为绝对路径,但绝对路径指向我的页面而不是旧页面和图像位置。如果有人可以找到那个,我会指向一个我之前问过这个问题的页面,你会得到一个双重复选标记。
答案 0 :(得分:3)
该表是正文的直接子表,当正文被删除(它将会被删除)时,该表将成为顶级元素。变化
$div = $('table.targetTable', html);
到
$div = $(html).filter('table.targetTable');
要避免其他问题,请使用:
$div = $($.parseHTML(html)).filter('table.targetTable');