4

我正在休耕

$('.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

需要分配时间。

知道我怎样才能得到同样的东西但更快吗？

添加了一个小提琴jsFiddle

4

3 回答 3

2

似乎大部分性能影响实际上来自于此：

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

起初，我认为您可能会因为 jquery 如何处理由元素之间的空格创建的额外文本节点而受到性能影响，所以我尝试了：

this.nextSibling.nextSibling.style.display = 'none';

这并没有真正帮助问题，所以似乎简单地在这么多元素上设置样式非常慢。为了解决这个问题，您可以考虑将默认样式设置为您期望的最常见情况，然后只对其他情况作出反应。对于您发布的小提琴示例，这将导致：

CSS：

.Icons {
  display: none;
}

新JS：

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

附录：事实证明，为所有这些元素添加一个类要快一点，所以你可以这样做http://jsfiddle.net/XuhaT/1/：

CSS：

#vTable {
    width:800px;
}
.Icon {
    display: none;
}
.visible.Icon {
    display: block;
}

JS：

$("#countOfItems").html($('#vTable .Row ').length);
var startDate = new Date();
$('.Row .Cell .Text ').each(function (index, item) {
    if (this.scrollWidth > $(this).parent().width()) $(this).next().addClass('visible');
});
var endDate = new Date();

$("#claculationTime").html(endDate - startDate);
于 2013-03-03T10:06:41.123 回答
2

我猜你正试图隐藏.Iconif .Textwidth > .Cell。见下面的方法，

我尝试使用filter.

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/

于 2013-03-04T17:07:33.947 回答
1

您可以使用此比较器将 Brandon 的回答速度提高大约 6 倍

if (this.scrollWidth > this.parentNode.scrollWidth)

希望能帮助到你！

于 2013-03-03T17:48:39.943 回答