如何分割动态列表取决于Jquery的许多元素
How split a dynamic list depends of a number of elements with Jquery?
我有一个动态列表的最大数量的元素(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
});
相关文章:
- jquery移动对齐按钮取决于内容大小
- jquery切换取决于文本框的值
- 多个jQuery.on()事件无法运行xBrowser(取决于顺序)
- jquery jqgrid 不显示结果,具体取决于 JSON 对象中的参数
- JQuery 操作取决于选择的单选按钮 - if/else
- 更新 url 而不重新加载,具体取决于使用 jquery/javascript 选择的复选框
- 如何使用jquery/javascript将类添加到不同的元素中,具体取决于当天
- JQuery Mobile单击事件不起作用,具体取决于HTML中的元素位置
- 停留在页面上取决于值jquery
- 如何创建数组取决于是否在jQuery中设置了变量
- jQuery:添加和删除<br>标签,这取决于窗口宽度以及标签是否已经存在
- 注册多个脚本取决于 jquery 到 wordpress 主题
- 输入焦点取决于更大的父元素与 jQuery
- jQuery - 进度条和分页,具体取决于显示的元素和枚举数
- 如何使用jQuery将所有HTML元素包装在DIV中,具体取决于这些HTML元素的总高度
- 将文本字段中的数字与数组中的数字进行比较,具体取决于 PHP 和 jQuery 的选择
- CSS/Javascript/Jquery:显示/隐藏 DIV 取决于单击的两个图像之一
- Jquery 需要在下一个最近的类中显示错误消息,具体取决于输入
- 隐藏/显示的最佳方法取决于jQuery的选择选项
- 未捕获的TypeError ("no access")问题与jquery取决于浏览器导航