JQuery循环显示每六个项目到一个新的无序列表

我对jQuery世界有点新，我想知道：我有一个JSON对象从数据库返回内容。我将如何通过这些项目循环显示每个ul只有六个，每个项目被附加在一个li中的ul中，然后每六个项目构造一个新的ul以显示li中的剩余项目？基本上我试图这样：JQuery循环显示每六个项目到一个新的无序列表

项1
项目2
项目3
项目4
项目5
项目6

第7项
项目8
项目9
项目10
项目11
项目12

等等

来源

2009-11-01 loganlee

function buildLists(data, element) { 

    var count = parseInt((data.length/6) + (data.length % 6 == 0 ? 0 : 1), 10), 
     html = ""; 

    for (var i = 0; i < count; i++) { 
     html += "<ul>"; 
     for (var j = i; j < (6 + (6 * i)); j++) { 
      html += "<li>" + data[j] + "</li>"; 
     } 
     html += "</ul>"; 
    } 

    element.append(html); 
}

来源

2009-11-01 08:37:35 ChaosPandion

我的回答将是主要核心JavaScript。

$(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 
    });

来源

2009-11-01 08:37:46

这使用一个数组，但应该让你指出正确的方向。

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>"); 
}

来源

2009-11-01 08:57:47

想出了一个使用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>

来源

2009-11-01 09:17:58 WesleyJohnson

我会推荐练习unobtrusive Javascript。关键原则之一是将标记与设计分开;你想把视图分解成6个块，但是你所代表的数据仍然是一个长而连续的列表。如果您创建了多个列表来表示这种情况，那么任何尝试理解页面内容的脚本或屏幕阅读器等专用客户端都会产生误导。

因此，我会创建一个列表，并使用CSS使其显示为多个块。

CSS：

.newBlock { margin-top: 1em; }

的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"); 
});

online demo

来源

2009-11-01 10:49:04 mahemoff

你好mahemoff！我尝试了你的解决方案，并且真的关闭了，但由于某种原因，它只显示了六个中仅有的奇怪的第一项。这是从你的原始代码修改，但结构相同。有什么方法可以向我发送我所拥有的？ – loganlee 2009-11-02 07:11:37

应该工作 - 你看到链接演示btw？我会尝试摆脱CSS，你应该看到长列表。您可以将它发送到michael @ mahemoff。com或把它放在一个pastebin和链接在这里，谢谢。 – mahemoff 2009-11-02 09:28:01

JQuery循环显示每六个项目到一个新的无序列表

回答

相关问题