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

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 = css开发者_如何学运维bottom; 
    }

    displayname.hover(alignSpans);

});

displayname.alignSpans(); does not work

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);

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()); 
    });
});