javascript - 为什么我不能使用此 AJAX 响应的一部分？

Question

我有一个 jQuery ajax 调用:

$.ajax ({
    url : 'foo/bar/',
    success: function(data) {
        console.log(data);

        var newHeaderText = $(data).find('#header-text').text();
        $("#header-text").text(newHeaderText);

        var newContent = $(data).find('#content').html();
        console.log(newContent);
        $("#content").html(newContent);
    }
});

记录的数据成功显示了目标页面的完整html。

header-text 部分按预期工作。

然而，console.log(newContent) 返回 undefined。没有在这里发布 foo/bar/ 的整个 html，我很确定 data 中有一个 id content 的 div >，并且它有很多子元素。

为什么我尝试抓取一个页面的内容并将其放入另一个页面的内容时不起作用。这让我特别困惑，因为 header-text 似乎工作得很好。

Answer 1

你可以试试 $.parseHTML相反:

var newContent = $($.parseHTML(data)).find('#content');

如果 #content 是顶级元素，那么上面的代码可能仍然会遗漏它。然后，您可以通过首先将 HTML 加载到容器中，然后在其中找到元素来解决此问题:

var newContent = $('<div>').append($.parseHTML(data)).find('#content');