獲取每個父母的第一個孩子的同名類別

Question

我想在其父元素內垂直對齊一系列的泡泡文本div。

此築巢的簡化版本看起來像這樣

<div class="bubble"> 
    <div class="bubble-inner"> 
    </div> 
</div> 

<div class="bubble"> 
    <div class="bubble-inner"> 
    </div> 
</div> 

我使用這個jQuery來讓我的內部元件的高度，我需要的保證金適用於父元素。

$('.bubble').each(function() { 
    var rBubbleHeight = $('.bubble > .bubble-inner:first-child').outerHeight(); 
    var rbh = (405 - rBubbleHeight)/2; 
    $(this).css('margin-top',rbh); 
}); 

問題是我只得到第一個父母的第一個孩子的高度。當我使用這個時，我得到空。我錯過了什麼？

Answer 1

問題在於，在每次迭代中，您正在使用完整的選擇器（將只返回第一個匹配的元素），而不是單獨查看當前的.bubble。

試試這個：

$('.bubble').each(function() { 
    var rBubbleHeight = $(this).find('.bubble-inner:first-child').outerHeight(); 
    ... 
}); 

Answer 2

嘗試是這樣的：

$('.bubble-inner').each(function() { 
    var rbh = (405 - $(this).outerHeight())/2; 
    $(this).css('margin-top', rbh); 
});