HTML ul> li使用jQuery分为3列

Question

我想做的是，将列表分为3列。 我知道css3可以选择执行此操作，但我希望使用jQuery完成。 因为该应用程序需要在IE 8+上运行。

我将解释我尝试检查代码的内容

<ul class="split-list">
  <li>list Item 1</li>
  <li>list Item 2</li>
  <li>list Item 3</li>
  <li>list Item 4</li>
  <li>list Item 5</li>
  <li>list Item 6</li>
  <li>list Item 7</li>
  <li>list Item 8</li>
  <li>list Item 9</li>
  <li>list Item 10</li>
  <li>list Item 11</li>
  <li>list Item 12</li>
  <li>list Item 13</li>
  <li>list Item 14</li>
  <li>list Item 15</li>
  <li>list Item 16</li>
</ul>

这是我的jQuery

$(function($) {
    var num_cols = 3,
    container = $('.split-list'),
    listItem = 'li',
    listClass = 'sub-list';
    container.each(function() {
        var items_per_col = new Array(),
        items = $(this).find(listItem),
        min_items_per_col = Math.floor(items.length / num_cols),
        difference = items.length - (min_items_per_col * num_cols);
        for (var i = 0; i < num_cols; i++) {
            if (i < difference) {
                items_per_col[i] = min_items_per_col + 1;
            } else {
                items_per_col[i] = min_items_per_col;
            }
        }
        for (var i = 0; i < num_cols; i++) {
            $(this).append($('<ul ></ul>').addClass(listClass));
            for (var j = 0; j < items_per_col[i]; j++) {
                var pointer = 0;
                for (var k = 0; k < i; k++) {
                    pointer += items_per_col[k];
                }
                $(this).find('.' + listClass).last().append(items[j + pointer]);
            }
        }
    });
});

终于我的小css

.split-list ul{
  float: left;
  margin-left: 1em;
}
.split-list li{
  padding-right: 2em;
  line-height: 1.5em;
  font-size:12px;
 }

查看我的结果：

它分为三列，但问题是我想将列表项12拉到第二列，因为这是正常标准。 始终填充左侧，并且必须动态。

有人可以帮我吗？

Answer 1

检查一下

 $(function($) { var num_cols = 3, container = $('.split-list'), listItem = 'li', listClass = 'sub-list'; container.each(function() { var items_per_col = new Array(), items = $(this).find(listItem), max_items_per_col = Math.ceil(items.length / num_cols), difference = (max_items_per_col * num_cols)- items.length; for (var i = 0; i < num_cols; i++) { if (i == num_cols-1) { items_per_col[i] = max_items_per_col - difference; } else { items_per_col[i] = max_items_per_col; } } for (var i = 0; i < num_cols; i++) { $(this).append($('<ul ></ul>').addClass(listClass)); for (var j = 0; j < items_per_col[i]; j++) { var pointer = 0; for (var k = 0; k < i; k++) { pointer += items_per_col[k]; } $(this).find('.' + listClass).last().append(items[j + pointer]); } } }); }); 

 .split-list ul{ float: left; margin-left: 1em; } .split-list li{ padding-right: 2em; line-height: 1.5em; font-size:12px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="split-list"> <li>list Item 1</li> <li>list Item 2</li> <li>list Item 3</li> <li>list Item 4</li> <li>list Item 5</li> <li>list Item 6</li> <li>list Item 7</li> <li>list Item 8</li> <li>list Item 9</li> <li>list Item 10</li> <li>list Item 11</li> <li>list Item 12</li> <li>list Item 13</li> <li>list Item 14</li> <li>list Item 15</li> <li>list Item 16</li> </ul> 

Answer 2

您可以像这样简单地通过css为<li>元素实现三列，

 .small-width{ display:inline-block; width:30%; } 

 <ul class="split-list"> <li class='small-width'>list Item 1</li> <li class='small-width'>list Item 2</li> <li class='small-width'>list Item 3</li> <li class='small-width'>list Item 4</li> <li class='small-width'>list Item 5</li> <li class='small-width'>list Item 6</li> <li class='small-width'>list Item 7</li> <li class='small-width'>list Item 8</li> <li class='small-width'>list Item 9</li> <li class='small-width'>list Item 10</li> <li class='small-width'>list Item 11</li> <li class='small-width'>list Item 12</li> <li class='small-width'>list Item 13</li> <li class='small-width'>list Item 14</li> <li class='small-width'>list Item 15</li> <li class='small-width'>list Item 16</li> </ul> 

非常棒

Answer 3

不过，这可能不是很语义

 function colonize(parentId, colNo) { var $ul = $(parentId), $lis = $('li', $ul), n = $lis.length, i, x, k = 0; for (i = 0; i < colNo; i++) { $col = $('<div>'); $col.width(100/colNo+'%'); $col.appendTo($ul); debugger; if (i == colNo - 1) { x = n - k; } else { x = Math.floor(n / colNo) == n / colNo ? n / colNo : Math.floor(n / colNo) + 1; } k += x; if (x) { Array.prototype.slice.apply($lis, [k - x, k]).forEach((li) => { $(li).appendTo($col); }); } } }; $(document).ready(function() { colonize('ul.split-list', 3); }); 

 ul { vertical-align: top; } ul>div { float: left; margin:0; padding:0; border:0; } ul div li { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <ul class="split-list"> <li>list Item 1</li> <li>list Item 2</li> <li>list Item 3</li> <li>list Item 4</li> <li>list Item 5</li> <li>list Item 6</li> <li>list Item 7</li> <li>list Item 8</li> <li>list Item 9</li> <li>list Item 10</li> <li>list Item 11</li> <li>list Item 12</li> <li>list Item 13</li> <li>list Item 14</li> <li>list Item 15</li> <li>list Item 16</li> </ul> </body>