多張圖片只能得到第一格的高度

我有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

多張圖片只能得到第一格的高度

回答

相關問題