Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/user-interface/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
将li列表制作为不使用javascript的列_Javascript_Jquery_Html - Fatal编程技术网

将li列表制作为不使用javascript的列

将li列表制作为不使用javascript的列,javascript,jquery,html,Javascript,Jquery,Html,我试图用javascript而不是CSS3将一长串拆分为3列(因为并非所有浏览器都支持它,例如IE)。但它不起作用。 基本上,我想每隔5、7或3个,不管是什么数字,,将它们作为列,以此类推。因此,如果列表中有A B C D E F G H I J K L,则第一列应包含ABCDEF,下一列将从GHIJKL开始。我希望你明白我的意思 Javascript: var colCount = 3, ul = $('ul'), li = ul.find('li'),

我试图用javascript而不是CSS3将一长串
  • 拆分为3列(因为并非所有浏览器都支持它,例如IE)。但它不起作用。 基本上,我想每隔5、7或3个,不管是什么数字,
  • ,将它们作为列,以此类推。因此,如果列表中有
    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));
    }
    
    var colCount=3,
    ul=$('ul'),
    li=ul.find('li'),
    liLen=li.length,
    liPerCol=数学单元(liLen/colCount),
    ulWrap='
      , 里斯本, 我 对于(i=0;i
    HTML:

    我需要你的帮助


    非常感谢。

    您可以在css2.1中尝试,给出float:left并为所有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);
    
    });
    
    var li=$('li'),
    len=li.长度,
    col_len=3,
    num_cols=数学楼层(长/长),
    j=0;
    li.每个(功能(i){
    如果(i%num\u cols==0&&j');
    }
    如果(j==col_len+1)j--;
    $(此)。附加到(“#分隔符”+j);
    });
    
    不,这不是我要找的。在您的解决方案中,
  • 并排浮动。我想要的是,列表应该在每5个
  • 之后拆分,然后为下一个5个
  • 创建一个新列,以此类推……对不起,我忘了感谢您的努力。你明白我的意思了吗?你有别的解决办法吗?
    
    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);
    
    });