Блог

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

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

Например:

a.логотип = 200 пикселей (высота) div.заголовок — 250 пикселей (высота)

-( (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') возвращает height(); 40 пикселей, но DOM сообщает 200 пикселей для высоты элементов.

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

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

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