У меня есть динамический список с максимальным количеством элементов (16), мне нужно разбить его между одним или тремя столбцами, зависит от следующего условия: 1-3 элемента: 1 столбец, 4-8 элементов: 2 столбца, 9-16 элементов: 3 столбца
Хотя немного странно, ваш вопрос интересен (по крайней мере для меня).
На этой странице есть список, если вы попытаетесь изменить количество элементов и обновить страницу, вы увидите элементы, отсортированные в соответствии с вашими критериями. Очевидно, что если вы загрузите список через 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 и т. Д.