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

ifwidth >を隠そうとしていると思い.Iconます。以下のアプローチを参照してください。.Text.Cell

を使用して、jQueryコードをループの外に移動しようとしました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

このコンパレータを使用すると、ブランドンの回答を約6倍高速化できます。

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

それが役に立てば幸い！

于 2013-03-03T17:48:39.943 に答える