动态设置en元素的宽度以匹配相邻元素的宽度

Question

我的html如下：

<div class="row">
    <div class="image"><img src="" alt="" /></div>
    <div class="caption"></div>
</div>
<div class="row">
    <div class="image"><img src="" alt="" /></div>
    <div class="caption"></div>
</div>

我试图将每个.caption的宽度设置为与.image img 的高度相同

我走对了吗？

$(".caption").each(function(){
    var imgheight = $(this).closest(".image img").height();
    $(this).css({
        width: imgheight
    });
});

Answer 1

试试这个，

var imgheight = $(this).closest('.row').find(".image img").height();

或

var imgheight = $(this).prev(".image").find("img").height();

您也可以使用children（）而不是find（）

closest（）通过测试元素本身并在DOM树中遍历其祖先，给出与选择器匹配的第一个元素。

Answer 2

try:

var imgheight = $(this).parents(".row").find(".image img").height();

Answer 3

试试这个

$(".caption").each(function(){
  var imgheight = $(this).parent().find(".image img").height();
  $(this).width(imgheight);
});

实时演示