2

这个想法是用通过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>不同。

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

4

2 回答 2

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'));

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

于 2013-08-09T16:28:38.413 回答
1

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

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

于 2013-08-09T16:40:38.163 回答