Jquery 无法获取垂直图像

我正在使用以下代码获取垂直图像并向其中添加类，但不知道为什么，它不起作用：

    //wrapall div inside a container
    $('#page_container .et_pb_column_1 .et_pb_module').wrapAll('<div class="slider-pag_interna">');

    //for each img I check height and width and assign some classes
    $(".slider-pag_interna div span img ").each(function(){
        
        if ($(this).width() < $(this).height()) {
          $(this).parent().parent().addClass("vertical");
        }
        else{
            $(this).parent().parent().addClass("horizontal");
        }
        
    });

我的html代码：

<div id="page_container" class="et_pb_row et_pb_row_0 et_pb_row--with-menu" style="z-index: 3;">
        <div class="et_pb_column et_pb_column_1_2 et_pb_column_1  et_pb_css_mix_blend_mode_passthrough et-last-child">
            <div class="et_pb_module et_pb_image et_pb_image_0">
                <span class="et_pb_image_wrap "><img loading="lazy" src="https://images.unsplash.com/reserve/Af0sF2OS5S5gatqrKzVP_Silhoutte.jpg?ixid=MXwxMjA3fDB8MHxzZWFyY2h8M3x8cGljfGVufDB8fDB8&ixlib=rb-1.2.1&w=1000&q=80" alt="" width="auto" height="auto"></span>
            </div>
            <div class="et_pb_module et_pb_image et_pb_image_1">
                <span class="et_pb_image_wrap "><img loading="lazy" src="https://images.unsplash.com/reserve/Af0sF2OS5S5gatqrKzVP_Silhoutte.jpg?ixid=MXwxMjA3fDB8MHxzZWFyY2h8M3x8cGljfGVufDB8fDB8&ixlib=rb-1.2.1&w=1000&q=80" alt="" width="auto" height="auto"></span>
            </div>
            <div class="et_pb_module et_pb_image et_pb_image_2">
                <span class="et_pb_image_wrap "><img loading="lazy" src="https://www.threebu.it/wp_threebu/wp-content/uploads/2017/06/vertical-farming-chris-jacobs.jpg" width="auto" height="auto"></span>
            </div>
            <div class="et_pb_module et_pb_image et_pb_image_3">
                <span class="et_pb_image_wrap "><img loading="lazy" src="https://images.unsplash.com/reserve/Af0sF2OS5S5gatqrKzVP_Silhoutte.jpg?ixid=MXwxMjA3fDB8MHxzZWFyY2h8M3x8cGljfGVufDB8fDB8&ixlib=rb-1.2.1&w=1000&q=80" alt="" width="auto" height="auto"></span>
            </div>
        </div>

---

My

您的脚本似乎是在呈现DOM之前执行的，这就是为什么脚本中的所有宽度与高度比较都返回FALSE的原因。所有元素的高度=0，宽度=0

Jquery代码现在就被放置在测试页面的标记中。

---

尝试将其移动到代码中的部分，事情会很顺利。

将所有内容插入window on load函数，而不是document ready修复了该问题

$(window).on('load', function(){

    $('#page_container .et_pb_column_1 .et_pb_module').wrapAll('<div class="slider-pag_interna">');

    $(".slider-pag_interna div span img ").each(function(){
        
        if ($(this).width() < $(this).height()) {
          $(this).parent().parent().addClass("vertical");
        }
        else{
            $(this).parent().parent().addClass("horizontal");
        }
        
    });
}); 

---

请在问题中包含html/图像，最好是在片段编辑中，然后单击[]。到底什么不起作用？在您的测试页面上，我确实看到了.et_pb_模块containerAh上的正确类-没有看到前面没有提到的额外.wrapAll，请在问题中包含所有相关信息。请参阅。将代码复制到JSFIDLE-工作正常：如上所述，通过@estellechvl打开您的页面并检查图像，可以显示它们具有预期的类。是的，freedomn-m是正确的。所以基本上把代码包装成$window.onload，=>{}；如果在Chrome调试器中调试doc.ready中的trickScripts，您将看到所有图像的高度和宽度都返回为零。当我将脚本复制到正文部分时，一切正常。我也尝试了加载窗口功能，但有时不起作用，可能是缓存问题……我认为加载过程中“加载窗口”功能正在运行，“文档准备就绪”是加载整个windows内容后的所有功能。。。我现在觉得自己很蠢…所以GGKMNTN，最后你们是怎么解决问题的？我把所有的东西都插入了window on load函数，而不是document ready函数