jQuery根据内容高度加载切换div类

我的模板上有一个动态内容加载。默认的div背景颜色是黄色，但是当内容长度超过300px时，div会切换或附加将背景颜色更改为红色的类。以下是代码。jQuery根据内容高度加载切换div类

<!DOCTYPE html> 
<head> 
<title>Untitled Document</title> 
<style type="text/css" media="all"> 
.short {background-color:yellow;padding:30px; width:200px;} 
.long {background-color:red;padding:30px;width:200px;} 
</style> 
</head> 

<body> 
<div class="short">div content</div> 
</body> 
</html>

来源

2011-07-21 johnmiami

您的动态内容是如何加载的？有没有什么地方我们可以确定它是在内容完成动态加载后确定的？ – rtpHarry

试试这个

$(document).ready(function(){ 
    $(".short").each(function(){ 
    if($(this).height() > 300){ 
     $(this).removeClass("short").addClass("long"); 
    } 
    }); 

});

来源

2011-07-21 19:51:41 ShankarSangoli

它似乎没有工作，或者我在这里丢失： – johnmiami

此内容是从服务器呈现还是从客户端使用AJAX加载？ – ShankarSangoli

从服务器：

他们都来了黄色 - 整个代码没有足够的空间 – johnmiami

$('div.short, div.long').each(function(){ 
    if($(this).height() > 300) { 
    $(this).removeClass('short').addClass('long'); 
    } else { 
    $(this).removeClass('long').addClass('short'); 
    } 
});

来源

2011-07-21 19:54:00 PeeHaa

如果你改变了你的HTML看起来像这样：

<div id="messageDiv" class="short">div content</div>

然后你可以使用一些像这样的代码：

$(document).ready(function() { 
    var $messageDiv = $("#messageDiv"); 
    if($messageDiv.height() > 300) { 
    $messageDiv.toggleClass("long short"); 
    } 
});

但这只是一个粗略的想法，因为它不清楚你是如何动态加载内容以及我们如何知道何时测试高度。

来源

2011-07-21 19:59:11 rtpHarry

jQuery根据内容高度加载切换div类

回答

相关问题