多张图片只能得到第一格的高度

我有3张图片，每张图片后都有一个div。我试图调整所有图像的高度，使之与div后面的高度相同。多张图片只能得到第一格的高度

但是，所有的图像都被赋予了高度的第一个格，而不是后面的那个。

我相信这是因为当使用$(".text").outerHeight()时，它始终获得第一个<div class="text">的高度。我已经使用这个.each功能来解决这个尝试，但都无济于事：

$('.container').each(function(i, obj) { 
    $(".container").find('img').css("height", $(".text").outerHeight()); 
});

这是我没有.each功能全码：

$(".container").find('img').css("height", $(".text").outerHeight());

div.container { 
 
    border: 1px solid; 
 
    margin-bottom: 30px; 
 
} 
 

 
img { 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <img src="https://images-na.ssl-images-amazon.com/images/M/[email protected]@._V1_SX300.jpg" alt="RED" /> 
 
    <div class="text"> 
 
    <h2>Red</h2> 
 
    <p>When his peaceful life is threatened by a high-tech assassin, .</p> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTAyNzQyNTcwNjVeQTJeQWpwZ1[email protected]_V1_SX300.jpg" alt="White House Down" /> 
 
    <div class="text"> 
 
    <h2>White House Down (2013)</h2> 
 
    <p>While on a tour of the White House with his young daughter, a Capitol policeman springs into action to save his child and protect the president from a heavily armed group of paramilitary invaders.</p> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <img src="https://images-na.ssl-images-amazon.com/images/M/[email protected]_V1_SX300.jpg" alt="White House Down" /> 
 
    <div class="text"> 
 
    <h2>White House Down (2013)</h2> 
 
    <p>While on a tour of the White House with his young daughter, a Capitol policeman springs into action to save his child and protect the president from a heavily armed group of paramilitary invaders.</p> 
 
    </div> 
 
</div>

来源

2017-03-07 The Codesee

要么你想循环所有.containers和目标.text和img那样，或循环遍历所有img或.text's并影响其他元素。

我在这里循环.text并更新了它之前的img。

$('.text').each(function() { 
 
    $(this).prev('img').css('height',$(this).outerHeight()); 
 
})

div.container { 
 
    border: 1px solid; 
 
    margin-bottom: 30px; 
 
} 
 
img { 
 
    float: left; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 

 
<div class="container"> 
 
    <img src="https://images-na.ssl-images-amazon.com/images/M/[email protected]@._V1_SX300.jpg" alt="RED" /> 
 
    <div class="text"> 
 
    <h2>Red</h2> 
 
    <p>When his peaceful life is threatened by a high-tech assassin, .</p> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <img src="https://images-na.ssl-images-amazon.com/images/M/[email protected]_V1_SX300.jpg" alt="White House Down" /> 
 
    <div class="text"> 
 
    <h2>White House Down (2013)</h2> 
 
    <p>While on a tour of the White House with his young daughter, a Capitol policeman springs into action to save his child and protect the president from a heavily armed group of paramilitary invaders.</p> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <img src="https://images-na.ssl-images-amazon.com/images/M/[email protected]_V1_SX300.jpg" alt="White House Down" /> 
 
    <div class="text"> 
 
    <h2>White House Down (2013)</h2> 
 
    <p>While on a tour of the White House with his young daughter, a Capitol policeman springs into action to save his child and protect the president from a heavily armed group of paramilitary invaders.</p> 
 
    </div> 
 
</div>

来源

2017-03-07 20:28:22

非常感谢，这本来是方便的，如果我早知道关于'.prev'功能 - 我从来没有想过做这种方式的。再次感谢！ –

@ TheCodesee np。你也可以在相反的方向使用'$ .next（）' –

你在正确的轨道上 - 这个问题确实是与你的.text选择的特异性。您想要对其进行限定，以便仅使用与图像相邻的.text，而不仅仅是页面上的第一个.text。

$('.container').each(function(index, element) { 
 

 
    var $this = $(element), 
 
    $img = $this.find('img'), 
 
    $text = $this.find('.text')[0]; 
 
    // we use [0] because $.find returns a collection of elements 
 
    // even if there's only one .text in the .container, 
 
    // and we can't get clientHeight from a collection. 
 
    // it's fine to leave $img as is because $.css 
 
    // works with collections _or_ single elements. 
 

 
    // then it's as simple as... 
 
    $img.css('height', $text.clientHeight); 
 
});

div.container { 
 
    border: 1px solid; 
 
    margin-bottom: 30px; 
 
    /* this line clears your floats; 
 
    they'll run into each other without it. 
 
    or you can use a clearfix - google for examples. */ 
 
    overflow: hidden; 
 
} 
 

 
img { 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <img src="https://images-na.ssl-images-amazon.com/images/M/[email protected]@._V1_SX300.jpg" alt="RED" /> 
 
    <div class="text"> 
 
    <h2>Red</h2> 
 
    <p>When his peaceful life is threatened by a high-tech assassin, .</p> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <img src="https://images-na.ssl-images-amazon.com/images/M/[email protected]_V1_SX300.jpg" alt="White House Down" /> 
 
    <div class="text"> 
 
    <h2>White House Down (2013)</h2> 
 
    <p>While on a tour of the White House with his young daughter, a Capitol policeman springs into action to save his child and protect the president from a heavily armed group of paramilitary invaders.</p> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <img src="https://images-na.ssl-images-amazon.com/images/M/[email protected]_V1_SX300.jpg" alt="White House Down" /> 
 
    <div class="text"> 
 
    <h2>White House Down (2013)</h2> 
 
    <p>While on a tour of the White House with his young daughter, a Capitol policeman springs into action to save his child and protect the president from a heavily armed group of paramilitary invaders.</p> 
 
    </div> 
 
</div>

来源

2017-03-07 20:32:49 jack

多张图片只能得到第一格的高度

回答

相关问题