jQuery将列表转换为列– $ .list2Columns（）

我以为可以与您共享我编写的jQuery函数，用于将列表（UL或OL）转换为列 。 如果您的列表进入并从上到下读取，将很有用，它将列表项分成垂直隔开的列。

编码

$.fn.extend(
{
    list2Columns: function(numCols)
    {
        var listItems = $(this).html().match(/(

• .+< /li>)/igm); /* get the list data */ var listHeader = $(this).html().match(/(
  • /igm); var numListItems = listItems.length; var numItemsPerCol = Math.round(numListItems / numCols); /* divide by the number of columns requires */ var currentColNum = 1, currentItemNumber = 1, returnHtml = '', i = 0; $(this).empty(); /*clean previous content */ /* append the columns */ for (i=1;i< =numCols;i++) { $(this).append('
    '); } /* append the items to the columns */ $.each(listItems, function (i, v) { if (currentItemNumber < = numItemsPerCol) { $('.listColumn-'+currentColNum).append(v); currentItemNumber ++; } else { currentColNum ++; currentItemNumber = 1; } }); } }); [/js]

    Usage [js] $('#countries').list2Columns(4);

• 演示版

  • 阿富汗
  • 阿尔巴尼亚
  • 阿尔及利亚
  • 澳大利亚
  • 奥地利
  • 巴哈马
  • 巴林
  • 孟加拉国
  • 巴巴多斯
  • 白俄罗斯
  • 加拿大
  • 科摩罗
  • 刚果
  • 库克群岛
  • 哥斯达黎加

  转换2列

  From: https://www.sitepoint.com/convert-list-columns-jquery-function/