javascript/jQueryで列のリストを分割する

Question

IEファミリはCSS3の列プロパティを受け入れないため、liのリストをjavascript/jqueryで5列に分割しようとしています。このプロセスでは、アレイを後ろにループする方が通常のループよりも速いと言われました。私はそれを試したが、それは私に面白い結果を与える。最後の列は最初の列として表示されますが、これは嫌です。私はコードに何が問題なのか分かりません。一番上に、コードはブラウザで遅く読んで...私にいくつかの光を与えてください。

JS/jQueryの：

var JL = {}, JL.Module = {}; 

JL.Module.indexSort = function(){ 
    var indexContainers = $('.index-section'), 
     indexControls = $('ul.index-navigation li'), 
     ieIndexContainers = $('.ie6, .ie7, .ie8, .ie9').find('.index-section'), 
     ulWrap = '<ul class="new-col" />', 
     colCount = 5, 
     subLi; 

    indexContainers.hide().filter(':first').show(); 

    indexControls.filter(':first').addClass('selected'); 

    //IE family don't accept css columns properties, so have to use JS 
    ieIndexContainers.each(function() { 
    var thisElem = $(this), 
     indexUl = thisElem.find('ul'), 
     indexLi = thisElem.find('li'), 
     indexLiLen = indexLi.length, 
     liPerCol = Math.ceil(indexLiLen/colCount), 
     lastColCount = indexLiLen % liPerCol, 
     sliceStart = indexLiLen - lastColCount, 
     sliceEnd = indexLiLen, 
     subLi, 
     i; 

    ieIndexContainers.find('ul').addClass('new-col'); 

    setTimeout(function(){ 
     sliceEnd = 0; 
     sliceStart = -1; 

     // Looping the array backwards 
     for(i = colCount - 1; i > 0; i--){ 
      sliceEnd = sliceStart; 
      sliceStart = (sliceEnd - liPerCol >= 0) ? sliceEnd - liPerCol : 0; 
      subLi = indexLi.slice(sliceStart, sliceEnd); 
      indexUl.after($(ulWrap).append(subLi)); 

     } 

     ieIndexContainers.find('.new-col').show(); 

     }, 0); 

    }); 
} 

HTML：

<div id="s" class="index-section"> 
    <h2>s</h2> 
    <ul> 
    <li><a href="#">Lorem ipsum</a></li> 
    <li><a href="#">Aorem</a></li> 
    <li><a href="#">Apsum</a></li> 
    <li><a href="#">Aonor</a></li> 

    <li><a href="#">Lorem ipsum</a></li> 
    <li><a href="#">Asdijnd oasd</a></li> 
    <li><a href="#">Awrom</a></li> 
    <li><a href="#">Aoidn iojd</a></li> 

    <li><a href="#">Lorem ipsum</a></li> 
    <li><a href="#">Asddewdwe</a></li> 
    <li><a href="#">Apsum</a></li> 
    <li><a href="#">Aonor</a></li> 

    <li><a href="#">Lorem ipsum</a></li> 
    <li><a href="#">Asdijnd oasd</a></li> 
    <li><a href="#">Awrom</a></li> 
    <li><a href="#">Aoidn iojd</a></li> 

    <li><a href="#">Lorem ipsum</a></li> 
    <li><a href="#">Asddewdwe</a></li>   
    </ul> 
</div> 

Answer 1

だけループ手前に。遅くなるということは、配列の長さをキャッシュしないことに関係します。しかし、forループの上限をcolCountにキャッシュします。パフォーマンスについて心配する必要はありません。ちょうどループを正しい方法で実行してください。それを数えましょう。

Answer 2

非常に少なくとも、あなたはループのためにあなたを更新する必要があります。

// Looping the array backwards   
for(i = colCount - 1; i > 0; i--){    
    sliceEnd = sliceStart;    
    sliceStart = (sliceEnd - liPerCol >= 0) ? sliceEnd - liPerCol : 0;    
    subLi = indexLi.slice(sliceStart, sliceEnd);    
    indexUl.after($(ulWrap).append(subLi));  
}  

は次のようになります。

// Looping the array backwards   
for(i = colCount - 1; i >= 0; i--){    
    sliceEnd = sliceStart;    
    sliceStart = (sliceEnd - liPerCol >= 0) ? sliceEnd - liPerCol : 0; 
    subLi = indexLi.slice(sliceStart, sliceEnd);    
    indexUl.after($(ulWrap).append(subLi));  
} 

Answer 3

あなたは、スライスを実行する必要があり、そしては新しいsliceEndとsliceStartを調整します。

これにより、列の順序問題が解決されます。アレイの順方向/逆方向に関するコメントはありません。