使用Jquery每個循環在從JSON對象提取的div中每個ul中顯示六個列表項

Question

我遇到了似乎無法在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>

等等....

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

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