JQuery slice（）またはeach（）のパフォーマンスは？

Question

$('.row').slice(0, 3).css('background-color: green'); 
$('.row').slice(4, 6).css('background-color: yellow'); 
$('.row').slice(6, 10).css('background-color: green'); 

それとも

x = 0; 
$('.row').each(function() { 
    if (x >= 0 && x <= 3) { 
     $(this).css('background-color: green'); 
    } 
    if (x >= 4 && x <= 6) { 
     $(this).css('background-color: yellow'); 
    } 
    if (x >= 6 && x <= 10) { 
     $(this).css('background-color: green'); 
    } 
    x++; 
}); 

一方が他方より速いですか？

Answer 1

スライスを使用します。それぞれは繰り返しごとに比較を行います。スライスは列を取ります。プラススライスは、より良い意図を表現します。これにより、最適化が可能になり、コードがより読みやすくなります。

Answer 2

正確にあなたの例を使用し、主に純粋なCSSのソリューションは、おそらくさらに高速でパフォーマンスを考慮：

順序が逆に見える

.row:nth-child(-n+10) { background-color: green; } 
.row:nth-child(-n+6) { background-color: yellow; } 
.row:nth-child(-n+3) { background-color: green; } 

が、それは、何をするか：最初のトップ10内のすべての10個の項目が行われます緑、次にトップ6黄、次にトップ3グリーン。

しかし、これは静的なhtmlでのみ機能します。選択を動的に変更する場合は、実際にjquery.sliceを使用してください。