首页 > 对ajax之后追加的html单独进行遍历操作?

对ajax之后追加的html单独进行遍历操作?

在一个列表里,首次加载的时候对整个列表做了一次遍历(每个列表内需要生成随机数并单独对内容做计算);
下滑的过程会异步加载新的数据,那么如何在加载新数据的同时对新数据遍历而不遍历之前已经遍历过的呢?
单纯的点击事件可以用事件代理的方法,这种情况要怎么处理

这是列表首次加载的遍历操作:

$(".userLabel ").each(function(){
    
    var lw = 0;
    $(this).find('label').each(function(index, el) {
      lw += parseInt($(this).css("width"))
    });
    if(lw < $(this).width() && !$(this).find(".manInfo").length){
        //相关操作
    }
})

ajax后如果再操作一次就会让整个列表全部在计算一次,这样感觉太浪费,有什么好的方案可以单独对每次追加的内容进行DOM操作?


明白了,建议你渲染完毕后,用一个变量保存当前索引值,每次加载数据后,从索引值开始往后遍历,随后更新索引值;


滚动加载的时候都已经获取到了新的数据,直接处理新的数据不就完了,处理完后直接append。

补充

已经遍历过的元素可以添加一个标识class,如js-enumerated

处理的方法可以改成这样

$(".userLabel:not(.js-enumerated) ").each(function () {
    var lw = 0;
    var $this=$(this);
    $this.find('label').each(function (index, el) {
        lw += parseInt($(this).css("width"))
    });
    if (lw < $this.width() && !$this.find(".manInfo").length) {
        //相关操作
    }
    $this.addClass('js-enumerated');
});
【热门文章】
【热门文章】