jQuery .each() 在 wooCommerce header cart 列表中找不到元素

Question

我试图在ul的li项目中隐藏一个"添加到购物车"按钮（此按钮来自插件，而不是woocommerce）。我为了动态工作而使用的逻辑如下：

jQuery(document).ready(function(){
    jQuery('div[class="lunar_woo_thumb"]').each(function(index,item){
        var prod_id = jQuery(item).data('wid');
        jQuery('a[class="remove"]').each(function(index2,item2){
            var prod_id_2 = jQuery(item2).data('product_id');
            if(prod_id == prod_id_2){
                jQuery(item).find(".addToCartBtn").addClass('hide_it');
            };
        });
    });
 });

如您所见，首先我使用类 lunar_woo_thumb 遍历所有div，并将自定义属性中的值分配给变量 prod_id 。

在该循环中，我调用另一个.each()函数来遍历所有带有类remove的标签。再次将自定义属性分配给另一个名为 prod_id_2 的变量，如果两个变量相等，则将类hide_it添加到带有 .addToCartBtn 的查找项。

我尝试将 DOM html 和 JS 复制到 jsFiddle，逻辑工作正常。

但是当在站点中使用时，内部循环永远不会找到带有类 .remove 的 <a> 标签，因此它永远不会同时处理这两个变量。

Cart的HTML在devTool中可见，但在源代码中不可见。

即使我尝试使用 jQuery 做简单的事情，例如将 css 直接更改为标头中购物车内的 <a> 标签之一，也永远不会发生。

Answer 1

如果可以在控制台中成功运行脚本，则解决方案是：

使用 jQuery 事件委托，.on（）将允许您处理尚未创建的后代元素上的事件。

祝你好运

Answer 2

$('.lunar_woo_thumb.addToCartBtn') 

是按具有交集的类选择的语法

Answer 3

你在代码中使用了错误的选择器。当选择类时，jQuery需要在类名前面有一个"."才能找到它：

jQuery('.lunar_woo_thumb')而不是jQuery('div[class="lunar_woo_thumb"]')

当然，对于您的第二个查询，这也需要发生。你可能因为jQuery选择名称属性的方式而感到困惑：jQuery('[name="lunar_woo_thumb"]')。

Answer 4

Charlietfl在原始问题中的评论让我找到了答案。我确实在加载购物车内容之前执行了脚本。

我没有使用jQuery(document).ready而是使用了jQuery(window).bind("load", function() {

以下是完整的代码：

jQuery(window).bind("load", function() {
    jQuery('div[class="lunar_woo_thumb"]').each(function(index,item){
        var prod_id = jQuery(item).data('wid');
        console.log(prod_id);
        jQuery('a[class="remove"]').each(function(index2,item2){
            var prod_id_2 = jQuery(item2).data('product_id');
            if(prod_id == prod_id_2){
                jQuery(item).find(".addToCartBtn").addClass('volalo');
            };
        });
    });
 });

谢谢大家，特别是查理特！