javascript - DIV 的 HTML 长度不等于 AJAX 加载的 HTML 长度

标签 javascript jquery html ajax

这是 HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script src="js/jquery.js"></script>
    <script src="js/script.js"></script>
</head>
<body>
<div id="SomeDiv"></div>
</body>
</html>

这是“script.js”的内容:

$(function() {
    function load_text() {
        $.get('test.html').done(function(data) {
            // Check this condition below.
            if ($.trim($("#SomeDiv").html()).length != $.trim(data).length){
                $("#SomeDiv").html(data);
            }
        });
    }
    setInterval(load_text, 2000);
});

这是“test.html”的内容:

<div>Hello World!</div>

上面的 test.html 只有那行代码,除此之外别无其他。因此,每次加载 AJAX 时,它都会返回相同的 HTML 并用它一遍又一遍地填充 DIV 标记。根据 if 条件,#SomeDiv 中的 HTML 和加载的 HTML 在第一次之后将不相等,之后它应该相等并且不应重新填充 DIV。

但是第一次加载后好像长度不一样了。这简直击中了我!怎么可能?我正在加载相同的内容,然后我从另一个文件中获取相同的内容并与之前加载的内容进行比较,但它们不相等......

那么这是正常的还是有任何其他方法可以让它在第一次加载后不填充 DIV?

我想做的是,如果加载的内容不同则显示它,否则不显示它。

最佳答案

注意:由于括号不正确,您(在编辑之前) trim 长度 :)

您正在将原始文本字符串与“结构化”HTML 进行比较(在解析元素可以添加到 DOM 并且空白可以更改之后)。

尝试比较 likelike(先将其转换为 DOM 元素):

// Need to wrap the incoming elements in a parent
var $data = $('<div>').html(data);
if ($.trim($("#SomeDiv").html()).length != $.trim($data.html()).length)

关于javascript - DIV 的 HTML 长度不等于 AJAX 加载的 HTML 长度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28049627/

相关文章:

javascript - 显示另一个 div 时隐藏一个 div

javascript - 展开阅读更多内容的 jQuery 代码是什么?

javascript - 无论 div 的大小如何,都在一行中显示按钮

javascript - 如何为 <li> 的直接子级添加一个类?

javascript - 多个按钮的复制到剪贴板功能如何从 id 切换到类标识符

javascript - 为什么 history.pushState 不起作用?

javascript - 在表单输入字段中创建默认值

javascript - 使用 setState 动态填充对象数组

javascript - POST 以打开 javascript 窗口并让 Flash 关闭窗口

javascript - 在 div 中显示加载动画