Jquery跨页表格无法按厂商名称过滤问题求助

核心问题 #

$.get是异步请求，你原来的过滤代码在页面初始化时就直接执行了，但此时远程页面的表格内容还没加载到当前页面，$(".camera-selector-row")找不到任何元素，导致过滤逻辑完全没生效。

修正方案 #

把过滤逻辑放到$.get的回调函数内部，确保只有当表格内容成功插入到页面后，再执行过滤操作。

修正后的代码 #

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $.get("https://vst-wf.webflow.io/all-products-page", function(data) {
        var extractedContent = $(data).find("#main-collection").html();
        $("#display-content").html(extractedContent);
        
        // 过滤逻辑移到此处，确保内容已加载完成
        var cameraItems = $(".camera-selector-row"); 
        console.log(cameraItems);
        cameraItems.each(function() {
            var manufacturer = $(this).find(".data_manu > div").text().trim();
            console.log(manufacturer);
            if (manufacturer !== "Vieworks") {
                $(this).hide();
            }
        });
    });
});
</script>

补充说明 #

如果觉得回调嵌套不够直观，也可以用async/await来处理异步流程，代码结构更清晰：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(async function() {
    try {
        // 等待远程内容加载完成
        const data = await $.get("https://vst-wf.webflow.io/all-products-page");
        var extractedContent = $(data).find("#main-collection").html();
        $("#display-content").html(extractedContent);
        
        // 执行过滤
        var cameraItems = $(".camera-selector-row"); 
        console.log(cameraItems);
        cameraItems.each(function() {
            var manufacturer = $(this).find(".data_manu > div").text().trim();
            console.log(manufacturer);
            if (manufacturer !== "Vieworks") {
                $(this).hide();
            }
        });
    } catch (err) {
        console.error("加载内容失败:", err);
    }
});
</script>

内容的提问来源于stack exchange，提问作者Beldion