Question

我们的想法是用通过ajax调用请求的相同页面替换网页的内容，但只替换不同的HTML元素。

目前我在$.ajax成功回调中有这个：

var replace = function(first, second){

  $(first.html() !== second.html())
      first.replaceWith(second);

};

replace($('#container'), response.find('#container'));

哪个有效，但因为内容总是被替换，我会看到“剪辑”效果。 ajax请求几乎每秒运行多次，直到某个类从ajax响应添加到容器标记中，因此裁剪非常烦人。

基本上我只想替换具有不同html的元素，但不知何故从最后一级开始，以防止替换具有相同html代码的元素。

我在这里做了一个小提琴示例：http://jsfiddle.net/2u4eB/

因此，在该标记中，只应替换<b>标记的内容，而不是现在的整个div，因为只有<b>不同。

有没有人对如何实现这一点有任何指示？

Answer 1

如果你能做出一些假设，那就不那么难了：

假设1：每次

完全

假设2：唯一改变的是某些html标签内的TEXT

然后您必须知道HTML标记。如果您是一个一致的人，那么您的所有动态数据都应该包含在一个类似的标记中 - 在您的问题中，您提到了<b>标记，因此我们做出第三个假设：

假设3：所有动态数据都包含<b>标记

然后你要做的就是：

var replace = function(first, second) {
    var oldValues = first.find('b'),
        newValues = second.find('b');

    oldValues.each(function(i) {
        if(oldValues[i].textContent != newValues[i].textContent) {
            oldValues[i].textContent = newValues[i].textContent;
        }
    });
};

replace($('#container'), response.find('#container'));

注意：这是有效的，因为jQuery的find()按文档顺序返回节点列表 - 所以假设＃1非常重要。

Answer 2

我强烈建议使用支持客户端绑定的框架。（示例包括但不限于Knockout，Handlebars，Angular，Underscore）这将比编写低级DOM操作更快地提供更好的结果。

Knockout.js和Underscore.js是我的最爱，但有很多很棒的选择。

用AJAX响应中的内容替换网页内容

2 个答案: