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

由于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);

  });
}

var JL={}，JL.Module={}；
JL.Module.indexSort=函数（）{
var indexContainers=$（'.index节'），
IndexControl=$（'ul.index-navigation li'），
ieIndexContainers=$（'.ie6、.ie7、.ie8、.ie9'）。查找（'.index节'），
ulWrap='
，
colCount=5，
subLi；
indexContainers.hide（）.filter（':first'）.show（）；
indexControls.filter（':first'）.addClass（'selected'）；
//IE系列不接受css列属性，因此必须使用JS
ieIndexContainers.each（函数（）{
var thisElem=$（此），
indexUl=thisElem.find（'ul'），
indexLi=thisElem.find（'li'），
indexLiLen=indexLi.length，
liPerCol=Math.ceil（indexlinen/colCount），
lastColCount=IndexLinen%liPerCol，
sliceStart=IndexLinen-lastColCount，
sliceEnd=IndexLinen，
苏布里，
我
ieIndexContainers.find（'ul'）.addClass（'new-col'）；
setTimeout（函数（）{
sliceEnd=0；
sliceStart=-1；
//向后循环数组
对于（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:

s

只需将其向前循环即可。速度变慢与不缓存数组长度有关。但是，您可以在

colCount

中缓存for循环的上限。不要担心性能，只需以正确的方式进行循环即可。让它向前计数。

至少，您需要更新for循环：

// 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));     
}  

---

您应该执行切片，然后调整新的切片结束和切片开始：

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

---

这将解决您的列排序问题。对数组前/后循环没有评论。

反向迭代数组是所有微优化的微优化。你说的是微秒。另外，你使用的是jQuery，它本身会比向后迭代数组造成更多的开销。。。

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