HTML ul＆gt;使用jQuery将li分成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

检查一下

＆＃13;

＆＃13;

$(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]);
            }
        }
    });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用css这样的<li>元素实现三列

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>