Использование каждого цикла Jquery для отображения шести элементов списка на ul внутри элемента div, извлеченного из объекта JSON - PullRequest
Новая
       12

Использование каждого цикла Jquery для отображения шести элементов списка на ul внутри элемента div, извлеченного из объекта JSON

0 голосов
/ 02 ноября 2009

У меня проблемы с тем, что я не могу отобразить шесть элементов списка в ul, который вложен в div. Вот что у меня есть: 

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

и тд ....

1 Ответ

0 голосов
/ 02 ноября 2009

Прежде всего, я предлагаю вам очистить свой код и удалить все ненужные вещи, вам будет легче читать и, надеюсь, понимать и исправлять.

Я думаю, что ваша проблема связана с тем, как вы обрабатываете блок if if (i == 0 || i % 6 == 0) (кстати, if (i % 6 == 0) также работает): переменная proNameLink заполнена в этом блоке, что объясняет, почему вы получаете только 1-й элемент каждые 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);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...