jQuery，循环遍历每个匹配的选择器，如果高度小于X，则应用类

好奇我在这个设置的各个方面都做错了什么。我的目标是循环浏览网站上的每个.grid块，确定哪些块的高度小于或等于58px，对于那些块，在该元素的h1标记中添加一个class.etruncate文本。

我的HTML（大大简化）：

<body>
    <div class="container">
        <div class="grid-block">
            <h1>Block Title</h1>
            <p>Random length excerpt text.</p>
        </div>
        <div class="grid-block">
            <h1>Block Title</h1>
            <p>Random length excerpt text.</p>
        </div>
        <div class="grid-block">
            <h1>Block Title</h1>
            <p>Random length excerpt text.</p>
        </div>
    </div>
</body>

JQuery我正在尝试：

$('body').hover(function(){ 
    $('.grid-block').each(function( index ) {
        var gridheight = $(this).height();
        if ( gridheight <= 58 ) {
            $('h1', this).addClass('truncate-text');
        }
    });
});

首先，我很想知道如何做到这一点，而不需要做整个"身体悬停"的事情。然后让其他人按照概述的方式工作。

对整个JS/JQuery来说还是个新鲜事。

我建议将其放入一个函数中，这样你就可以在任何你想要的触发器上实现：

function addClass() {
    $('.grid-block').each(function(i){
        var expHeight = 58;            
        var gridHeight = $(this).height();
        if(gridHeight <= expHeight){
            $(this).find('h1').addClass('truncate-text');
        }
    });
}

那你什么时候都可以叫这个。例如，如果您希望它发生在页面加载上：

$(document).ready(function(){
    addClass();
});

或在定时事件中：

setTimeout(function(){
    addClass();
}, 1000);

正如Kevin B在下面提到的那样——我应该在文档准备好的时候说——如果你想在页面加载时激发它，那就是

$(window).on("load", function(){
    addClass();
});

相关内容

最新更新

热门标签：