javascript - 使用 javascript/jQuery 将 li 列表拆分为列

Question

由于 IE 系列不接受 CSS3 列属性，因此我尝试使用 javascript/jquery 将 li 列表拆分为 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 中。不用担心性能，只需以正确的方式进行循环即可。让它向前数。