jQuery 根据最近图像的宽度更改 div 的宽度?

标签 jquery css

我有一个具有以下结构的 ul:

<ul>
<li><img><div class="infotext">some variable length text</div></li>
<li><img><div class="infotext">some variable length text</div></li>
<li><img><div class="infotext">some variable length text</div></li>
<ul>

图像根据窗口高度被赋予动态高度,它们的宽度是自动的(可变的,我的图像有不同的比例,但我保持它们的高度相同),所以我想制作我的信息文本div 匹配这个可变宽度。我尝试了以下方法:

jQuery('.infotext').width(jQuery(this).closest('img').width());

jQuery('.infotext').width(jQuery('.infotext').closest('img').width());

jQuery('.infotext').width(jQuery('.infotext').parent().width());

但它们都不起作用。到目前为止,我很难过......

更新: 我已经弄清楚是什么原因造成的,但还不知道解决方案是什么。我的图像正在使用延迟加载,这会干扰获取正确的图像高度。我需要弄清楚如何在延迟加载发生后获取图像大小...

最佳答案

图像标记是前一个元素,而不是祖先元素,因此 .closest().parent() 将不起作用。

尝试:

jQuery('.infotext').each(function(){
    $(this).width(jQuery(this).prev('img').width());
})

jsFiddle example

关于jQuery 根据最近图像的宽度更改 div 的宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24145139/

相关文章:

javascript - jquery更新全局变量

javascript - 永久更改滚动代码

javascript - Highcharts JS - 在饼图之间共享图例颜色

css - 如何在 CSS 中引用附加了类的输入?

html - 在移动设备上,如何在点击超链接时设置其样式?

javascript - 动态更改的 Firebase URL

javascript - 我正在尝试用 php 回应 javascript

css - 在居中对齐的文本中垂直对齐单选按钮

html - W3C 验证失败,路径段 : space is not allowed 中的非法字符

css - 具有 "position: absolute;"的 <span> 元素是否表现为 block 级元素?