无法获取垂直图像
Posted
技术标签:
【中文标题】无法获取垂直图像【英文标题】：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" ></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" ></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" ></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" ></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", () => );这样的东西就可以了
【参考方案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，最后你是怎么解决的？ 我在“加载窗口功能”中插入了所有东西，而不是“准备好文档”以上是关于无法获取垂直图像的主要内容，如果未能解决你的问题，请参考以下文章