<分区>
标签 javascript jquery html css
<分区>
我有一张包含不同消息的表格,一个表格行始终包含一条消息。消息的标题中还包含姓名和时间。消息/表格行的宽度是可变的,因此如果宽度太小,则没有足够的空间用于姓名和时间。这就是为什么我要尝试创建一个脚本,如果没有足够的空间,将 .time
设置为 display: none
。
这就是我到目前为止所得到的。不幸的是,它不起作用。
$( "tr" ).each(function() {
var width = $(this).width();
var name = $( ".name" ).width();
var time = $( ".time" ).width();
var total = name + time;
if ( total >= width ) {
$( ".time" ).css( "display", "none" );
}
});
最佳答案
您正在搜索具有 .name/.time 类而不是当前元素子元素的所有元素实例。试试像这样:
$( "tr" ).each(function() {
var $this = $(this);
var width = $this.width();
var wname = $this.find( ".name" ).width();
var time = $this.find( ".time" );
if ( wname + time.width() >= width ) {
time.css( "display", "none" );
}
});
您也可以尝试将时间和名称都设置为 display:inline-block 然后将 tr 设置为 overflow-y:hidden 如果 tr 高度固定且等于名称/时间高度
关于javascript - 仅在有足够空间时显示元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27489577/
相关文章:
javascript - 如何在Mysql中生成月报表和周报表?
javascript - Materialise 下拉菜单在移动设备中禁用 Sly jQuery 滚动条
javascript - Card.js - 在表单中找不到数字输入
javascript - 鼠标悬停/悬停时用选择标签替换文本
html - 将另一个背景图像添加到已有内嵌背景图像的元素中
javascript - getTimezoneOffset() 方法在本地主机和服务器上返回不同的时间
javascript - 一个非常小的 jQuery 插件的简单查询