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

Question

I am running into problems where I can't seem to display six list items within a ul that is nested within a div. 我遇到了似乎无法在div中嵌套的ul中显示六个列表项的问题。 The following is what I have so far: 以下是我到目前为止的内容：

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

And my HTML: 而我的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>

What I basically want to do is loop through the JSON object, put six list items for each newly created UL and place those ULs inside the newly created DIV so that each UL block has 6 list items and each block that is nested inside the new DIV is floated next to each other. 我基本上想要做的是遍历JSON对象，为每个新创建的UL放置六个列表项，并将这些UL放置在新创建的DIV中，以便每个UL块具有6个列表项，并且每个块嵌套在新DIV内彼此相邻漂浮。 The end result will look something like this: 最终结果将如下所示：

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

and so on.... 等等....

Answer 1

First of all, I suggest that you clean up your code and remove any unnecessary stuff, you'll make it easier to read and hopefully to understand and fix. 首先，我建议您清理代码并删除所有不必要的内容，以使其更易于阅读，并希望能够理解和修复。

I think your problem comes from the way you handle your if block if (i == 0 || i % 6 == 0) (btw, if (i % 6 == 0) also works): the proNameLink variable is filled in this block, which explains why you only get the 1st item of every 6 found. 我认为您的问题来自处理if块if (i == 0 || i % 6 == 0) （顺便说一句， if (i % 6 == 0)也有效）： proNameLink变量已填写此块，这说明了为什么您只获得每6个发现的第一项。 I guess that you wanted to do the following: 我想您想执行以下操作：

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

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

问题描述

1 个解决方案

解决方案1
0 2009-11-02 09:05:27

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

问题描述

1 个解决方案

解决方案1 0 2009-11-02 09:05:27

解决方案1
0 2009-11-02 09:05:27