获得具有相同类名的每个父母的第一个孩子

时间:2013-06-26 13:59:10

标签: jquery foreach parent css-selectors

我正在尝试在其父元素中垂直对齐一系列bubble文本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);
});

问题是我只得到第一个父母的第一个孩子的身高。当我使用这个时,我得到null。我错过了什么?

2 个答案:

答案 0 :(得分:2)

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

试试这个:

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

答案 1 :(得分:0)

尝试这样的事情:

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