Question

我正在尝试通过AJAX加载其他页面内容。它加载内容，但我在解析新内容时遇到问题。

这是我的代码

  $.get(urlPath, function (content) {
                var newDom = $(content);
                var newTitle = newDom.find("title").text();
                console.log(newDom);
                console.log(newDom.find(CLASS.MAIN_CONTENT));
                console.log(newTitle);
                $(CLASS.MAIN_CONTENT).replaceWith(newDom.find(CLASS.MAIN_CONTENT));
            });

这不起作用，我从请求中获取有效内容但仍然无法从新DOM中获取任何元素这是用$(content)

解析的输出

以下是内容console.log(content)

的原始输出

有什么不对，为什么这不起作用？

Answer 1

首先，请注意，使用$()解析该HTML会丢弃其中一部分，因为$()期望解析正文内容，而不是完整文档。因此，看起来它们应该嵌套在结构中的元素可能最终位于jQuery对象的顶层。例如：

var content = $(
  "<!doctype html>" +
  "<html>" +
  "<head><title>Example</title></head>" +
  "<body>" +
  "<p>Hi there</p>" +
  "</body>" +
  "</html>"
);
console.log(content.length); // 2
content.each(function() {
  console.log(this.tagName); // TITLE, P
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

find在 jQuery对象中的顶级元素中查找，但不查看顶级元素本身，只查看它们的后代。如果与CLASS.MAIN_CONTENT选择器匹配的元素位于顶层，find将无法找到该元素。你想要filter。如果它位于任何一个位置，您需要find和filter的组合：

var mainContent = newDom.find(CLASS.MAIN_CONTENT).add(newDom.filter(CLASS.MAIN_CONTENT));

Answer 2

解决方案

 var newDom = $('<div></div>').append($.parseHTML(content));
                document.title = newDom.find("title").text();
                $(CLASS.MAIN_CONTENT).replaceWith(newDom.find(CLASS.MAIN_CONTENT));

JQuery get / load无法解析新的DOM

2 个答案: