Я думал, что поделюсь с вами 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); $.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);
$.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);
$.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);
$.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);
демонстрация
- Афганистан
- Албания
- Алжир
- Австралия
- Австрия
- Багамские о-ва
- Бахрейн
- Бангладеш
- Барбадос
- Беларусь
- Канада
- Коморские острова
- Конго
- Острова Кука
- Коста Рика