jquery - 同じクラス名を持つすべての親の最初の子を取得

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);
});

問題は、最初の親の最初の子の高さしか取得できないことです。THIS を使用すると、null になります。私は何が欠けていますか？

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);
});