jQuery - 如何从 ajax 请求中获取元素的类答案

【问题标题】：jQuery - How to get an element's class from ajax requestjQuery - 如何从 ajax 请求中获取元素的类
【发布时间】：2017-12-10 14:30:47
【问题描述】：

我通过替换main 标记内的内容来使用ajax 加载我的网站页面。问题是，使用 Wordpress，每个页面都有自己的 body 类，这些类对样式目的很有用，所以我想用下一页的类替换旧页面的正文类。

我想我会运行一个新的 ajax 请求来获取整个 html 页面，然后检查 body 元素，然后使用 .attr("class") 获取类列表，最后用新的替换旧的 body 类。 .

但是这些类总是返回 undefined 而不是类列表。

编辑：我尝试使用 .cd-main-content 而不是 body 并且奇怪的是它有效，我得到了类这个元素。所以我现在假设问题不是来自我的语法，而是来自元素本身。
我怎样才能让它在 body 元素上工作？（我已经尝试将.find 替换为.filter，但它也不起作用。）

HTML 结构

<body id="body" class="home page-id-number other-classes">
    <main>
        <div class="cd-main-content">
            <!-- inside is the dynamically loaded content-->
        </div>
    </main>
</body>

jQuery

$.ajax({url: url, 
    success: function(data){
        var body = $(data).find("#body"); 
        var classes = body.attr("class");
        console.log(data); //returns the html as expected
        console.log("body : "+body); //returns [object Object]
        console.log("classes : "+classes); //returns undefined
    } 
});

【问题讨论】：

标签： javascript jquery html ajax wordpress

【解决方案1】：

从字符串获取时由 jQuery 过滤的“body”标签。

所以 $(data)[0] 将支持所有内容，没有正文。

也使用过滤器，而不是“查找” 所以你可以得到这样的课程：

$.ajax({url: url, 
    success: function(data){
       //replace body tag
       data = data.replace("<body", "<container").replace("body>", "container>");
       var classes = $(data).filter("container").attr("class");
        $("body").attr("class", classes);
    } 
});

【讨论】：

哦，替换body标签是个好主意。我实际上更喜欢你的解决方案，因为它不需要修改 html。谢谢！

【解决方案2】：

我找到了一个解决方案，它并不理想，但它解决了问题。

首先，我必须假设无法获取 body 元素的属性，因为它似乎已被 jQuery 过滤。但是可以获取子元素。

我最终将正文类添加到 body 和 main 元素（在 wordpress 的 header.php 文件中）。

这是我的代码：

HTML

<body id="body" class="home page-id-number other-classes">
    <main class="home page-id-number other-classes">
    <!-- if I had the possibility, I'd have added "data-body-class" instead of "class" -->
        <div class="cd-main-content">
            <!-- inside is the dynamically loaded content-->
        </div>
    </main>
</body>

jQuery

$.ajax({url: url, 
    success: function(data){
        var classes = $(data).filter("main").attr("class"); //get the classes 
        $("body, main").attr("class", classes); //set the classes 
    } 
});

【讨论】：

【解决方案3】：

你的 jQuery 代码是错误的：

$.ajax({url: url, 
    success: function(data){
        var body = $(data).find("body"); //not #body
        var classes = body.attr("class");
        console.log(data); //returns the html as expected
        console.log("body : "+body); //returns [object Object]
        console.log("classes : "+classes); //returns undefined
    } 
});

右边的选择器是body而不是#body，是一个id选择器

因此，要更改您的身体类，请使用以下代码：

$.ajax({url: url, 
    success: function(data){
        var classes = $(data).find("body").attr("class"); //get the classes
        $("body").attr("class", classes); //set the classes
    } 
});

jQuery Selectors

【讨论】：

抱歉，我编辑了我的代码以避免混淆。我的身体确实有一个身体 id，所以这不是问题的来源。感谢您提供设置课程的提示！