JQuery循环将每六项显示到一个新的无序列表中
我对jquery有点陌生，我想知道：我有一个从数据库返回内容的JSON对象。我如何循环通过这些项目，在li中每个ul仅显示六个项目，并且每个项目都附加在该ul中，然后每六个项目构造一个新的ul，以显示li中的其余项目？基本上，我试图做到这一点：JQuery循环将每六项显示到一个新的无序列表中,jquery,json,Jquery,Json,我对jquery有点陌生，我想知道：我有一个从数据库返回内容的JSON对象。我如何循环通过这些项目，在li中每个ul仅显示六个项目，并且每个项目都附加在该ul中，然后每六个项目构造一个新的ul，以显示li中的其余项目？基本上，我试图做到这一点： 项目1 项目2 项目3 项目4 项目5 项目6 项目7 项目8 项目9 项目10 项目11 项目12 等等。函数构建列表（数据、元素）{ var count=parseInt（（data.length/6）+（data.length%6==0？0
- 项目1
- 项目2
- 项目3
- 项目4
- 项目5
- 项目6
- 项目7
- 项目8
- 项目9
- 项目10
- 项目11
- 项目12
函数构建列表（数据、元素）{
var count=parseInt（（data.length/6）+（data.length%6==0？0:1），10），
html=“”；
对于（变量i=0；i”；
对于（var j=i；j<（6+（6*i））；j++）{
html+=“”+数据[j]+“ ”；
}
html+=“”；
}
元素。追加（html）；
}
$(function() { //execute when DOM is ready
var lists = '<ul>'; //start off list
var nums = new Array('1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20'); //add a few items to an array for demo
var i = 1; //1-based count for "every six"
var j = 0; //0-based count for array keys
while (i <= nums.length){
if(i%6 == 0){ //check if number is a multiple of 6
if(i != nums.length){
lists += '<li>'+nums[j]+'</li></ul><ul>';
}else{ //if this is the last array value, don't start a new ul
lists += '<li>'+nums[j]+'</li></ul>';
}
}else {
lists += '<li>'+nums[j]+'</li>';
}
i++; //go to next number
j++; //go to next number
}
$('body').append(lists); //ad uls to page
});
$（function（）{//在DOM就绪时执行
变量列表=“”；//起始列表
var nums=new数组（'1'，'2'，'3'，'4'，'5'，'6'，'7'，'8'，'9'，'10'，'11'，'12'，'13'，'14'，'15'，'16'，'17'，'18'，'19'，'20'）；//在数组中添加一些项目以供演示
var i=1；//“每六个”基于1的计数
var j=0；//数组键基于0的计数
while（i这使用了一个数组，但是应该可以让您指向正确的方向
var items = [1,2,3,4,5,6,7,8,9,10,11,12,13];
var ul = $("<ul></ul>");
for(var i = 0; i < items.length; i++) {
if(i % 6 == 0 && i > 0) {
console.log(ul.html()); // change this line - insert into the DOM wherever you'd like
ul = $("<ul></ul>");
}
ul.append("<li>" + i + "</li>");
}
var项目=[1,2,3,4,5,6,7,8,9,10,11,12,13]；
var ul=$（“
”）；
对于（变量i=0；i0）{
console.log（ul.html（））；//更改这一行-插入到DOM中，只要您愿意
ul=$（“
”）；
}
ul.附加（“”+i+“ ”）；
}
提出了一个使用jQuery的“.each”函数的解决方案。用于创建循环和列表的核心代码非常小。注意：这是假设返回的JSON对象具有嵌套数据
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var data =
[
{value: 1},{value: 2},{value: 3},{value: 4},{value: 5},{value: 6},
{value: 7},{value: 8},{value: 9},{value: 10},{value: 11},{value: 12},
{value: 13},{value: 14},{value: 15},{value: 16},{value: 17},{value: 18}
];
var $listReference;
$.each(data, function(i, item) {
if(i == 0 || (i) % 6 == 0){
$listReference = $("<ul>");
$("body").append($listReference);
}
$listReference.append($("<li>").text(item.value));
});
});
</script>
</head>
<body>
</body>
</html>
$（函数（）{
风险值数据=
[
{value:1}，{value:2}，{value:3}，{value:4}，{value:5}，{value:6}，
{value:7}，{value:8}，{value:9}，{value:10}，{value:11}，{value:12}，
{value:13}，{value:14}，{value:15}，{value:16}，{value:17}，{value:18}
];
var$listReference；
$。每个（数据、功能（i、项）{
如果（i==0 | |（i）%6==0）{
$listReference=$（“”）；
$（“正文”）。追加（$listReference）；
}
$listReference.append（$（“- ”）.text（item.value））；
});
});
我建议练习。其中一个关键原则是将标记与设计分离；您希望将视图分成6块，但表示的数据仍然是一个长而连续的列表。如果您创建多个列表来表示这一点，则会误导任何试图理解页面内容的脚本r像屏幕阅读器这样的专业客户
因此，我将创建一个列表，并使用CSS将其显示为多个块
CSS:
Javascript:
var records =
[ {name: "a"},{name: "b"},{name: "c"},{name: "d"},{name: "e"},{name: "f"},
{name: "g"},{name: "h"},{name: "i"},{name: "j"},{name: "k"},{name: "l"},
{name: "m"},{name: "n"},{name: "o"},{name: "p"},{name: "q"},{name: "r"}
]; // sample data, adapted from WesleyJohnson's example
var $ul = $("<ul/>").appendTo("body");
$.each(records, function(count, record) {
var $li = $("<li/>").html(record.name).appendTo($ul);
if (count % 6 == 0) $li.addClass("newBlock");
});
var记录=
[{name:“a”}，{name:“b”}，{name:“c”}，{name:“d”}，{name:“e”}，{name:“f”}，
{name:“g”}，{name:“h”}，{name:“i”}，{name:“j”}，{name:“k”}，{name:“l”}，
{name:“m”}，{name:“n”}，{name:“o”}，{name:“p”}，{name:“q”}，{name:“r”}
]；//样本数据，改编自卫斯理·约翰逊的例子
var$ul=$（“
”）.appendTo（“body”）；
$。每个（记录，函数（计数，记录）{
var$li=$（“”）html（record.name）.appendTo（$ul）；
如果（计数%6==0）$li.addClass（“新块”）；
});
你好，mahemoff！我尝试了你的解决方案，结果非常接近，但出于某种原因，它只显示了六个选项中的第一个，这很奇怪。它与你的原始代码有点不同，但结构相同。我有什么方法可以发送给你我所拥有的吗？应该有效-你看到链接的演示了吗？顺便说一句，我会尝试摆脱CS你应该看看长长的列表。你可以把它发送到michael@mahemoff.com或者把它放在一个粘贴箱上，链接到这里，谢谢。
.newBlock { margin-top: 1em; }
var records =
[ {name: "a"},{name: "b"},{name: "c"},{name: "d"},{name: "e"},{name: "f"},
{name: "g"},{name: "h"},{name: "i"},{name: "j"},{name: "k"},{name: "l"},
{name: "m"},{name: "n"},{name: "o"},{name: "p"},{name: "q"},{name: "r"}
]; // sample data, adapted from WesleyJohnson's example
var $ul = $("<ul/>").appendTo("body");
$.each(records, function(count, record) {
var $li = $("<li/>").html(record.name).appendTo($ul);
if (count % 6 == 0) $li.addClass("newBlock");
});