Question

基本上我正在尝试构建自己的GitHub's tree slider版本。相关的Javascript / JQuery代码是：

// handles clicking a link to move through the tree
$('#slider a').click(function() {
    history.pushState({ path: this.path }, '', this.href) // change the URL in the browser using HTML5 history module
    $.get(this.href, function(data) {
        $('#slider').slideTo(data) // handle the page transition, preventing full page reloads
    })
    return false
})

// binds hitting the back button in the browser to prevent full page reloads
$(window).bind('popstate', function() {
    $('#slider').slideTo(location.pathname)
}

好的，希望这是可以理解的。现在，这是我对这里发生的事情的解释，然后是我的问题/问题：

导航树时GET请求的回调函数是slideTo方法，HTML字符串作为参数传递给该函数。我假设slideTo是在脚本的其他地方或自定义库中定义的函数，因为我在JQuery文档中找不到它。所以，为了我的目的，我正在尝试构建我自己的这个函数版本。但传入此函数的参数“data”只是从GET请求返回的HTML字符串。但是，这不仅仅是我可以附加到文档中的div的HTML片段，因为如果我执行相同的GET请求（例如通过在Web浏览器中键入url），我希望看到整个网页和不只是一块。

因此，在我定义的这个回调函数中，我需要将“data”参数解析为DOM，以便我可以提取相关节点然后执行动画转换。但是，这对我来说没有意义。这通常看起来像一个坏主意。客户端必须解析整个HTML字符串才能访问DOM的一部分是没有意义的。 GitHub声称这种方法比整页重新加载更快。但是，如果我的解释是正确的，客户端仍然需要解析完整的HTML字符串，无论是通过单击（并运行回调函数）来浏览树，还是通过在浏览器中键入新URL来完成整页加载。所以我坚持要么将返回的HTML字符串解析为DOM，要么理想情况下只获取部分HTML文档。

有没有办法简单地将获取的文档加载到Javascript或JQuery DOM对象中，以便我可以轻松地操作它？或者甚至更好，有没有办法只获取一个具有任意id的元素，而不做一些疯狂的服务器端的东西（我已经尝试但最终是太意大利面条代码，难以维护）？

我也已经尝试过简单地将数据参数解析为JQuery对象，但这涉及到一个环绕式解决方案，它似乎只有一半时间工作，使用javascript方法去除不需要的东西的HTML，比如doctype声明和head标记：

var d = document.createElement('html');
d.innerHTML = data;
body = div.getElementsByTagName("body")[0].innerHTML;

var newDOM = $(body);
// finally I have a JQuery DOM context that I can use,
// but for some reason it doesn't always seem to work quite right

你会如何解决这个问题？当我自己编写这段代码并尝试让它自己工作时，我觉得无论我做什么，我都会做一些非常低效和笨拙的事情。

有没有办法轻松返回带有GET请求的JQuery DOM对象？或者更好，只返回使用GET请求获取的文档的一部分？

Answer 1

包装它; jQuery会解析它。

$(data) // in your callback

Answer 2

想象一下，您想要在普通的HTML网页中解析<p>标记。你可能会使用类似的东西：

var p = $('<p>');

右？因此，您必须使用相同的方法来解析整个HTML文档，然后在DOM树中导航以获取所需的特定元素。因此，您只需要说：

$.get(this.href, function(data) {
    var html = $(data);

    // (...) Navigating through the DOM tree

    $('#slider').slideTo( HTMLportion );
});

请注意，它也适用于XML文档，因此如果您需要通过AJAX从服务器下载XML文档，解析内部信息并在客户端显示它，方法完全相同，好吗？ / p>

我希望它可以帮助你：）

P.S ：不要忘记在每个JavaScript句子的末尾添加分号。也许，如果你没有把它们放进去，那引擎就能正常工作，但最好是安全并且总是写它们！

使用JQuery获取html文档并将其解析为DOM树

2 个答案: