时间戳

首页 > 解决方案 > 无限滚动添加新项目后如何更新文档更改？

javascript - 无限滚动添加新项目后如何更新文档更改？

问题描述

我在 dom 更改方面遇到了一些问题。

我的 parent 有 20 个li元素ul。我已li使用以下 jquery 代码更改了所有内容：

[...document.querySelectorAll('.signature-discount')].map(item => item.innerHTML = '<span class=\"discount-value\">new content</span>');
$(".product-detail").append("<span class='signature-info'>more new content</span>");

在所在的页面中li有一个无限滚动。问题是每次用户滚动到底部时，都会添加 20 个新元素，但它们的内容不受我的 jquery 代码的影响。

我曾尝试使用DOMSubtreeModified来收听我的ul类名的更改，但它没有按预期工作。你们能帮帮我吗？答案可以是 jquery 或纯 javascript。

标签： javascriptjquery

解决方案

我做的 ：）

由于我的场景没有像 SO 中关于这个主题的大多数问题那样的用户交互，我不得不观察用户滚动并检查我的 li 的长度。

如果长度大于初始值，那么它将重新应用我的 JS 更改。

let initialLength = 20; //this is my initial li length items
$(window).scroll(function() {
    if (document.querySelectorAll(".liProduct").length > initialLength) {
        initialLength = document.querySelectorAll(".liProduct").length; //defining a new initialLength to keep the loop going
        [...document.querySelectorAll('.signature-discount')].map(item => item.innerHTML = '<span class=\"discount-value\">new content</span>');
        $(".product-detail").append("<span class='signature-info'>new content 2</span>");
    }
});

推荐阅读