Question

我正在使用持久音乐播放器进行AJAX一个WordPress主题的过程。 Wordpress使用<body>标记上的动态类。基本结构如下：

<html>
    <head>
    </head>
    <body class="unique-class-1 unique-class-2 unique-class-3">
        <div id="site-container">
            <nav class="nav-primary">
                <a href="/other-page-01/">Other Page 01</a>
                <a href="/other-page-02/">Other Page 02</a>
            </nav>
            <div class="site-inner">
                <p>Site Content Here</p>
            </div>
        </div>
        <div id="music-player"></div>
    </body>
</html>

我目前正在使用/other-page-01/成功加载/other-page-02/，load('/other-page-01/ #site-container')等内容。但是，我需要从加载AJAX的页面中提取所有<body>类，并动态地用它们替换当前页面的<body>类。

注意：由于持久性<body>，替换整个<div id="music-player">元素不是一个选项。我已经尝试了jQuery.get()，但无法让它发挥作用。

如何从AJAX请求的页面中提取<body>类并用它们替换当前页面的<body>类？

我对jQuery或Javascript不是很熟悉，所以确切的代码会非常有用。非常感谢任何帮助。

谢谢，

亚伦

Answer 1

我的典型解决方案是告诉你将AJAX代码抛入jQuery对象，然后像平常一样读出来：

$(ajaxResult).attr('class');

有趣的是，看起来你不能用<body>元素做到这一点。

我认为最简单的解决方案（如果您可以控制生成的HTML）就是使用一些好的'正则表达式：

var matches = ajaxResult.match(/<body.*class=["']([^"']*)["'].*>/),
    classes = matches && matches[1];

我说“如果您可以控制生成的HTML”，因为这依赖于HTML格式合理。

另一种方法是将其解析为DOMDocument然后提取你需要的东西，但这会花费更多，而且在这种简单的情况下通常会有点过分。

Answer 2

将返回的html中的正文转换为具有特定ID的div，然后将该id作为目标，以获取正文的类（现在是div。）

modifiedAjaxResult = ajaxResult.replace(/<body/i,'<div id="re_body"')
                               .replace(/<\/body/i,'</div');
$(modifiedAjaxResult).filter("#re_body").attr("class");

当然，如果正文有一个id，这将与它发生冲突，因此任意数据属性可能不太可能中断。

modifiedAjaxResult = ajaxResult.replace(/<body/i,'<div data-re-id="re_body"')
                               .replace(/<\/body/i,'</div');
$(modifiedAjaxResult).filter("[data-re-id=re_body]").attr("class");

http://jsfiddle.net/N68St/

当然，要使用此方法，您必须转而使用$ .get代替。

$.get("/other-page-01/",function(ajaxResult){
    var modifiedAjaxResult = ajaxResult.replace(/<body/i,'<div data-re-id="re_body"')
                                   .replace(/<\/body/i,'</div');
    alert($(modifiedAjaxResult).filter("[data-re-id=re_body]").attr("class"));
    // the following line replicates what `.load` was doing.
    $(someElement).append( $("<div>").html(ajaxResult).find("#site-container") );
});

从AJAX页面的body元素中提取所有类，并替换当前页面的body类

2 个答案: