更新WordPress的Divi主题后出现jQuery(...).each is not a function错误如何解决

问题根源 #

Divi主题更新后出现的jQuery报错本质是jQuery实例冲突/加载顺序异常，两个核心诱因：

1. 你额外手动引入了jQuery 3.6.0资源，和WordPress、Divi默认自带的jQuery实例重复加载，导致全局jQuery变量被覆盖失效
2. 自执行函数已将jQuery别名设置为$，但代码内仍调用全局jQuery变量，易被其他后加载的第三方脚本篡改

修复步骤 #

• 第一步：删除你页脚模板里最开头的这行重复引入jQuery的代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

• 第二步：将你原来的两段自定义脚本替换为下方优化后的版本，修改点包括：全部使用局部别名$调用、增加DOM就绪监听保证DOM加载完成后再执行逻辑：

<script>
(function($){
    // 等待DOM完全加载后执行逻辑
    $(document).ready(function(){
        $('[id=beer_right]').each(function(){  
            var text = $(this).text();  
            console.log(text);
            var substring = text.substring(1,3);
            var substring100 = text.substring(1,4);
            if(substring100 == "100"){
                $(this).addClass('full')
            }else if (substring >= 60 && substring <= 99){
                $(this).addClass('full')
            }else if(substring >= 30 && substring <= 59){
                $(this).addClass('half')
            }else{
                $(this).addClass('empty')
            }
        });
        $("[id=bottle_right]").each(function(){  
            var text2 = $(this).text();  
            var substring2 = text2.substring(2,4);
            if(substring2 == "17" || substring2 == "16" || substring2 == "15" || substring2 == "14" || substring2 == "13" || substring2 == "12" || substring2 == "11" || substring2 == "10" || substring2 == "9%"){
                $(this).addClass('strong')
            }else if(substring2 == "8%" || substring2 == "7%" || substring2 == "6%"){
                $(this).addClass('average')
            }else{
                $(this).addClass('light')
            }
        })
        if ($('.app-link').length){
            if(navigator.userAgent.toLowerCase().indexOf("android") > -1){
                var applink = $('.app-link');
                applink.attr("href", "https://play.google.com/store/apps/details?id=com.AuphanSoftware.OftenDining");
            }
            if(navigator.userAgent.toLowerCase().indexOf("iphone") > -1){
                var applink = $('.app-link');
                applink.attr("href", "https://itunes.apple.com/us/app/often-dining/id608504639?mt=8")
            }
        }

        if ($(window).width() < 585) {
            $('.et_pb_tabs_controls > li').click(function() {
                $('html, body').animate({
                    scrollTop: $(".et_pb_all_tabs").offset().top
                }, 2000);
            });
        }
    })
})(jQuery); 
</script>

• 可选排查项：如果修改后仍有异常，可以在Divi主题设置的「性能」选项中，暂时关闭jQuery延迟加载、静态资源合并功能，排除脚本加载顺序问题。

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