仅在有足够空间的情况下显示元素

时间:2014-12-15 17:24:20

标签: javascript jquery html css

enter image description here

我有一个包含不同消息的表,一个表行总是包含一条消息。消息还包含标题中的名称和时间。消息/表格行宽度是可变的,因此如果宽度太小,则名称和时间空间不足。这就是为什么我尝试创建一个将.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" );
        }
});

2 个答案:

答案 0 :(得分:0)

您正在搜索具有.name / .time类而不是当前元素子元素的所有元素实例。试试smth。像这样:

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

你也可以尝试设置时间和名称来显示:inline-block然后将tr设置为overflow-y:如果tr高度固定并且等于名称/时间高度则隐藏

答案 1 :(得分:0)

您忘记在每个jQuery调用中包含容器元素:

var name = $(".name", this).width();
var time = $(".time", this).width();

在您的代码中,您没有选择预期运行代码的元素。

看到你的HTML和CSS的小提琴,看看它是否真的有用会很好。同时,请参阅this fiddle,我在其中使用ul元素。