jQuery: установите верхнюю позицию на 1/2 разницы между содержащимся дочерним элементом и родителем

Question

Хорошо, у меня есть всплывающие пузырьковые эффекты с абсолютно позиционированными и скрытыми дочерними элементами под названием div.caption.div.caption имеет родительский элемент с именем a.logo.

Я хочу вычесть высоту div.caption из a.logo и установить .css("top",..) равным ПОЛОВИНЕ от этого числа.

Например:

a.logo = 200px (высота) div.caption - 250px (высота)

- ((250 - 200) / 2) = -25

Результатом должно быть вертикальное центрирование дочернего элемента относительно родителя (несмотря на тот факт, что он переполняет родительский элемент.

У меня есть следующий HTML

<a class="logo" href="#">
  <div class="caption">Caption Text</div>
</a>

<a class="logo" href="#">
  <div class="caption">Caption Text</div>
</a>

<a class="logo" href="#">
  <div class="caption">Caption Text</div>
</a>

и jQuery

$("div.caption").each(function() {
    var theHeight = $(this).height();
    var container = $('this').closest('a.logo').height();
    if( theHeight > container ) {
        $(this).css("top",-( (theHeight-container)/2 ) + "px");
    }   
});

Что меня действительно сбивает с толку, так это то, что $(this).closest('a.logo') возвращает 40px для height();, но DOM сообщает 200px для высоты элементов.

Каким-то образом мой таргетинг для переменных отключен, но мне нужноиспользуйте .this(), так как есть несколько экземпляров всех этих целей, и мне нужно установить свойство top индивидуально.

Answer 1

Удалить кавычки вокруг this. Ваш код в настоящее время ищет элемент <this> и находит ближайший a.logo, которого не существует. height имеет значение null, что соответствует нулю в числовом контексте.

var container = $(this).closest('a.logo').height();