使用 Jquery 每个循环在从 JSON 对象中提取的 div 内的每个 ul 中显示六个列表项答案

【问题标题】：Using Jquery each loop to display six list items per ul inside a div pulled from a JSON object使用 Jquery 每个循环在从 JSON 对象中提取的 div 内的每个 ul 中显示六个列表项
【发布时间】：2009-11-02 07:47:03
【问题描述】：

我遇到了一些问题，我似乎无法在嵌套在 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>

等等……

【问题讨论】：

可能是 $.each(data.values, function(i,item)... ？还是我误解了响应格式？
我不确定，因为我对 jquery 世界有点陌生......但我认为 $.each(data, function(i, item) 会循环遍历从JSON 对象...不是吗？
现在，我的 each 循环函数只带回每 6 个找到的第 1 个项目，而不是全部 6 个项目。

标签： jquery ajax json loops

【解决方案1】：

首先，我建议你清理你的代码并删除任何不必要的东西，你会使其更容易阅读，并希望能够理解和修复。

我认为您的问题来自您处理 if 块 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);

【讨论】：

我认为这是我出错的地方...... if 块中的 proNameLink 。但是我尝试了你的解决方案，现在我根本没有得到任何输出......我错过了什么吗？