jquery - 获取具有相同类(class)名称的每个 parent 的第一个 child

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

问题是我只能得到第一个 parent 的第一个 child 的高度。当我使用这个时，我得到空值。我错过了什么？

Answer 1

问题在于，在每次迭代中，您都使用完整选择器(它将仅返回第一个匹配的元素)，而不是单独查看当前的 .bubble 内部。

试试这个:

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