Question

我试图将相同的宽度设置为一系列标题，如标题前的图像juste

我有这个HTML：

<div class="theparent"> 
<img src="pic.jpg"/>
<div class="caption">
        hello
    </div>
<div>
<div class="theparent">
    <img src="pic2.jpg"/>
    <div class="caption">
        hello
   </div>
<div>
<div class="theparent">
<img src="pic3.jpg"/>     
<div class="caption">
        hello
     </div>
<div>

所有图像的宽度都不同。我希望每个标题的宽度与之前的图片juste相同。重要提示：此宽度可能会有所不同，因此我认为我需要使用SetTimeOut

我尝试过类似的事情：

function launchcaption() {
 var myWidth = $(".theparent img").width();
  $(this).next().css( "width", "myWidth" );
}

setTimeout(launchcaption, 10);

请不要建议我使用css，在我的情况下，我强迫使用JS。谢谢！

Answer 1

您错过了选择器上的. 改变这个：

$(this).find("caption").css("width", myWidth);

到这个

$(this).find(".caption").css("width", myWidth);

Answer 2

您可以在css中执行此操作。只需将标题的宽度设置为100％，如下所示：

.caption{
     width: 100%;
}

它将自动获取父级的宽度。

Answer 3

怎么样

$(".caption").each(function(){
    $(this).css("width", $(this).prev('img').css("width"));
});

（根据您的需要添加SetTimeOut逻辑......）

如何在div之前将元素系列的宽度设置为图像juste的宽度

3 个答案: