Run functions on elements with a certain class as soon as the DOM is loaded, not using an event handler

Question

I have a simple function which I want to run on all elements with a certain class. I want this function to be run as soon as the DOM is loaded; not upon an event handler.

Below is the code that will run on an event handler like hover. How do I make it run as soon as the DOM is loaded?

$(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(); does not work

Answer 1

Assuming displayname is a jQuery object, you can use .each() to call a callback function using this as the contained DOM elements (which is very conveniently the same convention as an event handler)

displayname.each(alignSpans);

Answer 2

That's what the .each() function is for. I've made your code a bit more efficient too:

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