如何拆分动态列表取决于 Jquery 的多个元素？答案

【问题标题】：How split a dynamic list depends of a number of elements with Jquery?如何拆分动态列表取决于 Jquery 的多个元素？
【发布时间】：2014-03-20 16:45:45
【问题描述】：

我有一个最大元素数 (16) 的动态列表，我需要将其拆分为一列或三列，具体取决于以下条件：1-3 个元素：1 列，4-8 个元素：2 列，9- 16 个元素：3 列

【问题讨论】：

在这种情况下使用简单的 if() 语句有什么问题？
听起来很有趣。你试过什么？您在实施时遇到了什么具体问题？
编辑您的帖子，不要将代码放入 cmets。
您的问题似乎仍然缺乏细节！

标签： javascript jquery split custom-lists dynamic-list

【解决方案1】：

虽然有点奇怪，但你的问题很有趣（至少对我而言）。
在此页面上有一个列表，如果您尝试更改项目数量并刷新页面，您将看到根据您的条件排序的元素。显然，如果您通过 ajax 上传列表，则需要在完成的事件中插入代码。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style>
ul.new{float: left;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var arr=[];
    var len=$('li').length;
    for(i=0;i<len;i++){
        var content=$('li:eq('+i+')').html();
        arr.push(content);
        if(i===1||i===3||i===8){
            $('<ul class="new"></ul>').appendTo('body');
            }
        }
    $('#ajax').remove();
    var newLen=$('ul.new').length;
    if(newLen===1){
        for(a=0;a<3;a++){
            if(arr[a]){
                $('<li>'+arr[a]+'</li>').appendTo('ul.new:eq(0)');
                }
            }
        }
    if(newLen===2){
         var firstColumn=Math.round(len/2);
         var secondColumn=len-firstColumn;
         for(x=0;x<firstColumn;x++){
             $('<li>'+arr[x]+'</li>').appendTo('ul.new:eq(0)');
             }  
         for(y=firstColumn;y<len;y++){
             $('<li>'+arr[y]+'</li>').appendTo('ul.new:eq(1)');
            }   
        }
    if(newLen===3){
        var firstColumn=Math.round(len/3);
        var secondColumn=firstColumn;
        var sum=firstColumn+secondColumn;
        var thirdColumn=len-(firstColumn+secondColumn);
        for(x=0;x<firstColumn;x++){
             $('<li>'+arr[x]+'</li>').appendTo('ul.new:eq(0)');
            }   
         for(y=firstColumn;y<sum;y++){
             $('<li>'+arr[y]+'</li>').appendTo('ul.new:eq(1)');
            }
         for(z=sum;z<len;z++){
             $('<li>'+arr[z]+'</li>').appendTo('ul.new:eq(2)');
            }   
        }
});
</script>

</head>
<body>
    <ul id="ajax">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
    </ul>
  </body>  
</html>

如果你使用 ajax，前面的代码必须放在类似

 $.ajax({
    url: "your-url.html", 
    type:'get'    
  })
  .done(function(data) {
    var $response = $('<div />').html(data);
    $('body').html($response.find('#ajax'))
   //the code
 });

【讨论】：

这个已经有一段时间了，但可以解释一下你是如何在每一列中设置 # 的吗？我看到i===1||i===8||i===12，但不完全理解那里发生了什么。我希望将列表分成 12 人一组。所以如果有 14 人，第一组将是 12 人，第二组只有 2 人，如果有 30 人，它将是 2 组，每组 12 人，那么最后一组6等