使用jquery每個循環顯示六個列表項在從一個JSON對象拉的div內每個ul

我遇到了問題，我似乎無法在嵌套在div內的ul中顯示六個列表項。以下是我迄今爲止：使用jquery每個循環顯示六個列表項在從一個JSON對象拉的div內每個ul

$(function proName(){ 

$.getJSON("pros", function(data) { 

    /* Parse JSON objects */ 

    jJSON["pro_name"] = (function() { 
     //response = { 
      //values: [], 
      //count: 0 
     //}; 
     var $listReference; 
     var $listDiv; 
     var proNameLink; 
     $.each(data, function(i,item){ 
      if (item.pro_name != "undefined") { 
       if (i == 0 || i % 6 == 0) { 
       //response.count++; 
       //response.values[i] = item.pro_name; 
       var proName = item.pro_name; 
       var addProName = proName + ", "; 
       /* append li to ul block */ 
       proNameLink = $('<li><a class="pro-name-link'+i+'" href="#">'+proName+'</a></li>'); 
       $listDiv = $('<div id="scroll_controls" class="hasImage"></div>'); 
       $listReference = $('<ul id="pro-name-results"></ul>'); 
       $("#ajax-returned-content").append($listDiv); 
       $("#scroll_controls").append($listReference); 
       }; 
       $("#pro-name-results").append(proNameLink); 
       /* disable link after click */ 
       proNameLink.bind("click", function() { 
        $('.pro-name-link'+i+'').removeAttr('href'); 
        $('.pro-name-link'+i+'').css('color', '#ffffff'); 
        $('.added-search-terms').append(addProName); 
        $('.pro-name-link'+i+'').unbind('click'); 
       }); 
      }; 
     }); 
     //return response; 
    })(); 

    /* Return a number of values for a given object */ 

    //alert(jJSON.getValues("pro_name",null)); 
}); 
}); 

var jJSON = { 
getValues: function(obj,num) { 
    return jJSON[obj]["values"].slice(0,((num == null) ? jJSON[obj]["values"].length : num)); 
}, 
getCount: function(obj) { 
    return jJSON[obj]["count"]; 
} 
};

而我的HTML：

<body> 
    <div id="wn"> 
     <div id="lyr" class="content"><span class="search-terms-title">Search Terms: <span class="added-search-terms"></span></span></div> 
     </div> 
     <div id="ajax-returned-content" class="ajax-search-content"> 

    </div> 
</body>

我基本上想要做的是遍歷JSON對象，放六列表項爲每個新創建的UL和將這些UL放置在新創建的DIV中，以便每個UL塊都有6個列表項，並且嵌套在新DIV內的每個塊都相互浮動。最終的結果會是這個樣子：

<div id="ajax-returned-content" class="ajax-search-content"> 
    <div id="scroll_controls" class="hasImage"> 
     <ul id="pro-name-results"> 
      <li><a href="#" class="pro-name-link1">Jerry</a></li> 
      <li><a href="#" class="pro-name-link2">Henry</a></li> 
      <li><a href="#" class="pro-name-link3">Dolly</a></li> 
      <li><a href="#" class="pro-name-link4">Stephanie</a></li> 
      <li><a href="#" class="pro-name-link5">James</a></li> 
      <li><a href="#" class="pro-name-link6">Anderson</a></li> 
     </ul> 
    </div> 
    <div id="scroll_controls" class="hasImage"> 
     <ul id="pro-name-results"> 
      <li><a href="#" class="pro-name-link7">Andy</a></li> 
      <li><a href="#" class="pro-name-link8">Peter</a></li> 
      <li><a href="#" class="pro-name-link9">Sam</a></li> 
      <li><a href="#" class="pro-name-link10">Tony</a></li> 
      <li><a href="#" class="pro-name-link11">Ken</a></li> 
      <li><a href="#" class="pro-name-link12">Jun</a></li> 
     </ul> 
    </div> 
</div>

等等....

來源

2009-11-02 loganlee

可能是$。每個（data.values，功能（I，項目）......還是我誤解響應格式 – 2009-11-02 08:07:07

我不是因爲要確保我有點新的jQuery世界......但我認爲$ .each（數據，函數（我，項目）會循環從JSON對象帶回來的所有東西......不是？ – loganlee 2009-11-02 08:30:50

現在，我的每個循環函數只會帶回每6個找到的第一個項目，而不是全部6個項目 – loganlee 2009-11-02 08:34:13

首先，我建議你清理你的代碼，並刪除任何不必要的東西，你會讓它更容易閱讀並希望理解和修復。

我認爲你的問題來自於你處理的方式你如果塊if (i == 0 || i % 6 == 0)（順便說一句，if (i % 6 == 0)也適用）：在proNameLink變量填充該塊，這也解釋了爲什麼你只能得到每6中的第一個項目。我想，你想做到以下幾點：？？

if (i % 6 == 0) 
{ 
    // Create a new list for 6 next items 
    $listReference = $('<ul></ul>'); 
    // Create a container div for your list 
    var containerDiv = $('<div class="hasImage"></div>') 
    // append the div and list to the page DOM 
    div.append($listReference); 
    $('#ajax-returned-content').append(div); 
    // Note that if you want to set an ID to the ul and the div, you have to 
    // make it UNIQUE. Your code creates multiple DOM elements with the same ID. 
    // A kitten dies every time you do that. 
} 
// Create a list item, OUTSIDE of the if block 
var proName = item.pro_name; 
var proNameLink = $('<li><a class="pro-name-link'+i+'" href="#">'+proName+'</a></li>'); 
// Append list item to current list 
$listReference.append(proNameLink);

來源

2009-11-02 09:05:27 ybo

我認爲這是我出錯的地方...在if塊中的proNameLink但我嘗試了你的解決方案，現在我沒有得到任何輸出所有......我錯過了什麼？ – loganlee 2009-11-02 18:45:00

使用jquery每個循環顯示六個列表項在從一個JSON對象拉的div內每個ul

回答

相關問題