在javascript中不工作的列中制作li列表

making a list of li into columns not working in javascript

本文关键字：li 列表 javascript 工作      更新时间：2023-09-26

我试图用javascript将<li>的长列表分成3列，而不是CSS3(因为它不支持所有浏览器，即IE)。但这行不通。基本上，我想取每5个，7个，3个，无论多少，<li>，把它们做成列，以此类推。所以如果我有A B C D E F G H I J K L在列表中，第一列应该由ABCDEF组成，下一列将从GHIJKL开始。我希望你明白我的意思。

Javascript: 

var colCount = 3,
        ul = $('ul'),
        li = ul.find('li'),
        liLen = li.length,
        liPerCol = Math.ceil(liLen / colCount),
        ulWrap = '<ul style="float:left;width:200px;margin-right:20px;" />',
        liSub,
        i;
for(i = 0; i < liLen; i++){
    liSub = liLen.slice(i, 4);
    liSub.wrap($(ulWrap));
}
HTML: 

<ul>
  <li><a href="#">COLUMN 1</a></li>
  <li><a href="#">col 1.1</a></li>
  <li><a href="#">Apsum</a></li>
  <li><a href="#">Aonor</a></li>
  <li><a href="#">Aomsdomsdio</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="#">Apyrie sdij</a></li>
  <li><a href="#">Asddewdwe</a></li>    
  <li><a href="#">Apsum</a></li>
  <li><a href="#">Aonor</a></li>
  <li><a href="#">Aomsdomsdio</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="#">Apyrie sdij</a></li>
  <li><a href="#">Last entry col 1</a></li>
</ul>
我需要你的帮助。 许多谢谢。

这是你要找的吗:

http://jsfiddle.net/97sJ6/1/

这将li分成三列。

var li = $('li'),
    len = li.length,
    col_len = 3,
    num_cols = Math.floor(len/col_len),
    j = 0;
li.each(function(i) {
    if (i % num_cols == 0 && j < col_len) {
        j++;
        $('body').append('<ul style="float:left;width:200px;margin-right:20px;" id="divider' + j + '"/>');          
    }
   if (j == col_len+1) j--;
   $(this).appendTo('#divider' + j);
});

你可以尝试在CSS 2.1中，给float:left并为所有的li指定一些宽度。我希望

像这样:http://jsfiddle.net/thilakar/RXQgn/1/

相关文章：