JQuery .find() 在 .ajax() 结果上失败

Question

我正在开发 Chrome 扩展，在某些情况下，它会执行 $.ajax() 请求，然后使用 returned HTML 中特定元素的信息].现在，我只是想让它访问特定元素并将其记录到控制台以确保它正常工作。

首先，我相当确定 HTML 已成功检索。当我直接记录结果时，输出与我在Chrome中查看页面源时的结果相同。我也尝试过使用 $.parseHTML() ，它在登录时会给我一组顶级子项。使用选择器 returns 一个与选择器匹配的直接子元素的数组，但它们不适用于这些子元素的子元素（依此类推）。

我已经看了好几篇文章，并尝试了各种方法，例如使用 $(<selector>,<context>)、$(<result>).filter(<selector>) 和 $(<result>).find(<selector>) 都无济于事。每次我尝试记录这些时，我都会得到一个长度为 0.

的对象

$.ajax({jsonp: false, dataType: "html",url: getUWFlowLink($(this).attr('href')), success: function(siteHTML){

    console.log($("p.description",siteHTML));
    console.log($("p.description",$.parseHTML(siteHTML)));
    console.log($(siteHTML).find("p.description"));
    console.log($($.parseHTML(siteHTML)).find("p.description"));
    console.log($(siteHTML).filter("p.description"));
    console.log($($.parseHTML(siteHTML)).filter("p.description"));

}});

所有这些日志只是 return 个长度为 0 的对象。尝试记录 .html() 会导致输出 undefined，而尝试记录 .text() 会导致输出空字符串。示例页面，供参考 here。我试图访问的元素是顶部的描述简介 ("Chemical principles with applications...")，它在 HTML 中的位置（几层深）可以通过检查元素找到。

Answer 1

如果您成功地让 HTML 而不是运行进入 Access-Control-Allow-Origin 问题，我已经测试了以下在测试用例中的工作：

var description = $(siteHTML).find("p.description").html();
console.log(description);

如果你可以 console.log(siteHTML) 并且它给了你输出，那么你应该可以用 jQuery 查询响应，但是可能会有一些限制不将 HTML 添加到 DOM.

时，查询选择器将作用于哪个查询选择器

Answer 2

尝试这样的事情

var $result = $('<div />').append(siteHTML);
$result.find('p.description');

jQuery需要一个树结构来遍历和执行它的操作。在没有根元素的情况下直接尝试使用 .find() 是行不通的。在上面的例子中，$('<div/>') 将是根元素，通过附加结果，jquery 将在上面遍历它并找到 p.description.

Answer 3

如果您对链接的示例页面执行 "View page source"，您会发现您要查找的元素如下所示：

<script type="text/html" id="course-inner-tpl">

<div class="row-fluid">
  <div class="span6 left-col">
    <p class="description"><%- course.get('description') %></p>
...

这意味着元素在加载后正在浏览器上动态呈现。当 jQuery 解析它时，它不会成为 DOM 树的一部分，因为它在 <script> 标签内。

请注意，您还可以在同一页面上的静态 <meta> 标签中找到课程说明，您应该可以访问该标签。

编辑：如果您需要额外的信息，您可以解析相关的脚本来获取它。以下代码将遍历页面中的所有脚本，找到包含信息的脚本，提取定义 coursOjb 对象的文本，并将其解析为 JSON:

$('<div />').append(siteHTML).find('script').each(function(s) {
   var t = $(this).text();
   var p = t.indexOf('window.pageData.courseObj = {');
   if( p > 0 ) {
       var e = t.indexOf(';', p);
       var d = JSON.parse(t.substring(p+28, e));
       console.log(d.code);
       console.log(d.name);
       console.log(d.description);
       console.log(d.prereqs);
   }
});

JQuery .find() 在 .ajax() 结果上失败

JQuery .find() failing on an .ajax() result

html

ajax

jquery

jquery-selectors

google-chrome-extension