CODEWITHSUNDEEP
javascriptjquerydomdocument-ready
user247298
user247298

Reputation: 429

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 = cssbottom; 
    }

    displayname.hover(alignSpans);

});

displayname.alignSpans(); does not work

Upvotes: 0

Views: 138

Answers (2)

Ariel
Ariel

Reputation: 4500

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

Upvotes: 1

gnarf
gnarf

Reputation: 106332

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

Upvotes: 2

Related Questions