JavaScript: вычисление значения из свойства CSS в <DIV>в другое <DIV>

Question

Я новичок, так что это, вероятно, базовые вещи, но я попытался решить эту проблему с помощью поиска в Интернете без какой-либо удачи. Любая помощь очень ценится!

Что мне нужно сделать, это: переместить плавающее вниз X px после рендеринга страницы, где X - высота другого. Я проверил CSS вручную, добавив X px к свойству «Top:», и он работает нормально, проблема в том, чтобы сделать это в шести экземплярах после отображения страницы.

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

Решение может использовать JavaScript и / или jQuery, даже mootools загружается в соответствии с начальными инструкциями скрипта.

Я включил код из последнего div с селектором идентификаторов, я не знаю, насколько это актуально, я просто почувствовал, что это было после серфинга в Интернете в течение двух дней.

Большое спасибо!

<div id="blogwrap1"> <--! Wraps all blog entries for one page-->

    <div class="blogwrap2"> <--! Same as above, just a second wrap-->

<! - ====================== Этот раздел я повторил 6 раз ====================== ->

        <div class="entry"> <--! Wraps 1 blog entry-->

            <div class="entry-title"></div>

            <div class="entry-body">

                <div class="links"></div> <--! Here I need to add HEIGHT from "entry-tags" to TOP property -->

            </div>

            <div class="entry-footer">

                <div class="entry-footer-line">

                    <div class="entry-tags"></div> <--! Get HEIGHT property -->

                </div>
            </div>
        </div>
    </div>
</div>

<! - ================================================== ==================== ->

ОБНОВЛЕНИЕ!

Я поместил здесь пакет с html / CSS и т. Д. Для тестирования.

move_div.zip (64,5kb)

Одна вещь, о которой мне, вероятно, неясно, заключается в том, что высоту «тегов входа» следует добавить к свойству «top» класса «links» (оно не должно заменять значение). То, что я пытаюсь сделать, это плавать div относительно в той же позиции, когда «entry-tags» изменяет его высоту в зависимости от того, сколько тегов / строк тегов введено. Надеюсь, что это имело смысл. Спасибо!

Answer 1

Это линия, которую вы ищете?

$('div#move_me_down').css('top', $('div#the_one_that_we_need_the_height_from').height()+'px');

Answer 2

Я решил это с помощью предыдущих ответов. Они не работали из коробки, но указали мне в правильном направлении. Большое спасибо! Следующий код теперь работает как задумано:

jQuery.noConflict();
jQuery(document).ready(function(){
    jQuery(function(){ 
        jQuery('.entry').each(function(){
        var extra = jQuery(this).find('.entry-tags').height();
        var total = 44 + extra;
        jQuery(this).find('.linkr-bm').css('top', total + 'px');
        }); 
    });
});

Answer 3

Не имеет значения, но:

Если у вас одновременно загружены Mootools и jQuery, вы можете исправить это. Оператор $ имеет разные значения в каждом из них, поэтому сценарии, написанные для одного, могут не работать. Попробуйте использовать один или другой.

Тем не менее, здесь речь идет о jquery, при условии, что .entry-tags и .links не находятся ни в каких других позиционируемых элементах:

var pos = $('.entry-tags:first').position();
$('.links:first').css('top', pos.top);

=========== Существенное редактирование, приведенный выше код оставлен для потомства и ясности ==============

Увидев ваш уточненный вопрос:

$('.entry').each(function(){
    var height = $(this).children('.entry-tags').height();
    $(this).children('.links').css('top', height);
});

Если вы хотите, чтобы .links располагались относительно «entry», вы можете убедиться, что для записи объявлена ​​«position: относительная». Позиционированные элементы (абсолютные и относительные оба) имеют свою позицию, установленную по отношению к их первому позиционированному родителю.