Запускайте функции на элементах определенного класса сразу после загрузки DOM, не используя обработчик событий

Question

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

Ниже приведен код, который будет запускаться в обработчике событий, например при наведении курсора. Как мне заставить его работать, как только DOM загружен?

$(document).ready(function(){
    var displayname = $(".displayname");

    function alignSpans(){
        var spanheight = this.offsetHeight;
        var cssbottom = spanheight + "px";
        this.style.bottom = cssbottom; 
    }

    displayname.hover(alignSpans);

});

displayname.alignSpans(); не работает

Answer 1

Предполагая, что displayname является объектом jQuery, вы можете использовать .each() для вызова функции обратного вызова, используя this в качестве содержащихся элементов DOM (что очень удобно в том же соглашении, что и обработчик событий). )

displayname.each(alignSpans);

Answer 2

Для этого предназначена функция .each (). Я сделал ваш код немного более эффективным:

$(document).ready(function(){
    $(".displayname").each(function() {
        $(this).css("bottom", $(this).height()); 
    });
});