如何通过Ajax检测内容变化，仅在变化时用jQuery替换Div？

当然可以做到！你的思路非常合理——我们只需要在替换前对比当前Div的内容和新获取的内容，只有当两者存在差异时才执行更新，这样就能避免无意义的替换打断jQuery动画了。

下面是修改后的完整代码：

function autoRefresh() {
    $.ajax({
        success: function(data) {
            // 获取当前#vs的内容并去除首尾空白
            var currentContent = $.trim($('div#vs').html());
            // 解析新数据中的#vs内容并去除首尾空白
            var newContent = $.trim($('<div />').append(data).find('div#vs').html());
            
            // 仅当内容不同时才执行替换
            if (currentContent !== newContent) {
                $('div#vs').html(newContent);
            }
        }
    });
}

autoRefresh(); // 页面加载时执行一次
var auto_refresh = setInterval(autoRefresh, 10000); // 每10秒检测一次

关键说明： #

• 使用$.trim()处理内容：避免因HTML中的换行、空格等空白字符导致的误判，确保只有实际内容变化时才触发更新。
• 对比逻辑放在AJAX的success回调内：每次获取到新数据后，先和当前内容做对比，再决定是否更新。

这样修改后，你的动画就不会被无意义的Div替换打断了，只有当内容真的发生变化时才会更新Div~

内容的提问来源于stack exchange，提问作者joq3