无法获取垂直图像答案

【问题标题】：Can't get vertical images无法获取垂直图像
【发布时间】：2021-06-28 12:46:51
【问题描述】：

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

    //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>

我的test page

【问题讨论】：

请在问题中包含 html/图像，最好是在 sn-p 中（编辑并单击 [<>]）。
究竟是什么不工作？在您的测试页面上，我确实在 .et_pb_module 容器上看到了正确的类
啊 - 没看到 extra .wrapAll() (这里没有提到) 如前所述，请包括所有相关信息在问题中。见minimal reproducible example。
将代码复制到 jsfiddle - 工作正常：jsfiddle.net/7untm5kh 如上所述，@estellechvl 打开您的页面并检查图像显示它们具有预期的类。
是的，freedomn-m 是对的。所以基本上把你的代码包装成$(window).on("load", () => {});这样的东西就可以了

标签： jquery function height width each

【解决方案1】：

在“加载窗口”函数中插入所有内容而不是“文档就绪”修复了问题

$(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");
        }
        
    });
});

【讨论】：

【解决方案2】：

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

您的 Jquery 代码现在位于测试页上的 <head> 标记中。尝试将其移至代码中的<body> 部分，一切都会好起来的..

【讨论】：

尝试在 Chrome 调试器中调试它，你会看到所有图像的高度和宽度都返回为零。当我将脚本复制到正文部分时，一切正常。
我也在尝试加载窗口功能，但有时它不起作用，可能是缓存问题...我在想“加载窗口”功能在加载和“文档准备就绪”期间正在运行是加载整个windows内容后的所有功能......我现在觉得很愚蠢......
GGKMNTN，最后你是怎么解决的？
我在“加载窗口功能”中插入了所有东西，而不是“准备好文档”