Ajax GET HTML 为图像返回未定义的“src”答案

【问题标题】：Ajax GET HTML returning undefined 'src' for imagesAjax GET HTML 为图像返回未定义的“src”
【发布时间】：2013-04-01 03:34:58
【问题描述】：

我以前使用过这个，定位 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;">&nbsp;

        </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 中的所有相对路径转换为绝对路径，但绝对路径指向我的页面而不是旧页面和图像位置。如果有人能解决这个问题，我会给你指出我之前问过这个问题的页面，你会得到一个双重复选标记。

【问题讨论】：

您的 html 中没有 targetTable 类。
对不起，现在我改变了一些东西，以便更好地理解我在寻找什么......顺便说一句，这是传入的 HTML，而不是我的 HTML。我的 HTML 是在 append() 标签中生成的

标签： jquery ajax html-table src targeting

【解决方案1】：

表格是 body 的直接子元素，当 body 被移除时（它将是），表格将成为顶级元素。改变

$div = $('table.targetTable', html);

到

$div = $(html).filter('table.targetTable');

为了避免其他问题，请使用：

$div = $($.parseHTML(html)).filter('table.targetTable');

【讨论】：

您还应该在某处声明这些变量，而不是让它们进入全局范围，适当地命名它们也是一个好主意。
图像源仍然未定义。
$img 变量是作为“未定义”返回的内容
@DJERock 进行正常调试。 $div 是否包含该表？ $img = ... 选择器的第一部分是否选择了正确的表格行？第二部分是否选择了正确的 td？第三部分是否选择了正确的图像？
@DJERock 你可以感谢你的浏览器，使 html 有效，:p