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