这是 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 并且空白可以更改之后)。
尝试比较 like 和 like(先将其转换为 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/