javascript - 使用 $(this).scrollWidth 获取实际宽度非常慢

Question

我在做休闲

$('.Row .Cell .Text').each(function (index, item) {
                if (this.scrollWidth > $(this).parent().width())
                    $(this).next().show();

                else $(this).next().hide();
});

当我没有分配 $('.Row .Cell .Text') 时，一切都很好。但是如果我分配了行和单元格，上面的代码尤其是

this.scrollWidth

需要一定的时间。

知道如何才能更快地获得相同的东西吗？

添加了一个 fiddle jsFiddle

Answer 1

我猜您正试图隐藏 if .Text width > .Cell 的 .Icon。参见下面的方法，

我尝试使用 filter 将 jQuery 代码移出侧循环。

CSS

/*set overflow for .Text - This lets you calculate the actual width of .Text*/
.Text { overflow: hidden; } 

/* Hide .Icon by default and show only if .Text width < .Cell width*/
.Cell .Icon { display: none; }

JS

$('.Row .Cell .Text').filter(function (i, el) {    
    return el.scrollWidth <= this.parentNode.scrollWidth; //Thanks @nicoabie
}).next().show();

演示: http://jsfiddle.net/nYSDy/4/