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循環顯示每六個項目到一個新的無序列表

回答

相關問題