使用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

回答

相关问题