我们的想法是用通过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>
不同。
有人对我如何做到这一点有什么建议吗?
如果你能做出一些假设,那么就不那么难了:
- 假设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非常重要。
我强烈建议使用支持客户端绑定的框架。(示例包括但不限于Knockout、Handlebars、Angular、Undercore)这将比编写低级别DOM Manipulation更快地获得更好的结果。
Knockout.js和Undercore.js是我的最爱,但也有很多不错的选择。