在无序列表中解析json

时间:2011-07-11 14:58:29

标签: jquery json parsing pagination

我正在解析无序列表中的json文件。 问题是我需要在仅包含3个项目的“ul”中对结果进行分页。 所以我想在3个结果后关闭ul,然后重新打开它。

这是我的代码:

$.getJSON('/it_IT/eni_nel_mondo/components/menu/comunicati.json', function(data) {

          var list = [];

          $.each(data.items, function(i, c) {
            list.push('<li><a href="#"><div class="title"><div class="data"><span class="number">'+c.day+'</span><span class="month">'+c.month+'</span></div><h4>'+c.title+'</h4></div><p>'+c.abstract+'</p></a></li>');
          });

          $('<ul/>', {
            'class': 'results',
            html: list.join('')
          }).appendTo('.wrap .items');
        });

任何帮助?

我解决了这样的问题:

$.getJSON('/it_IT/eni_nel_mondo/components/menu/comunicati.json', function (data) {
        var list = [];
        var counter = 0;
        $.each(data.items, function (i, c) {
            counter++;
            list.push('<li><a href="#"><div class="title"><div class="data"><span class="number">' + c.day + '</span><span class="month">' + c.month + '</span></div><h4>' + c.title + '</h4></div><p>' + c.abstract + '</p></a></li>');
            if (counter != 0 && counter % 3 == 0) {
                $('<ul/>', {
                    'class': 'results',
                    html: list.join('')
                }).appendTo('.wrap .items');
                list = [];
            }
        });
        if (counter % 3 != 0 && list.length > 0) {
            $('<ul/>', {
                'class': 'results',
                html: list.join('')
            }).appendTo('.wrap .items')
        }

我希望这对某人有用。 thnx对Aaron Ray的回应,我已经看到了我的工作已经完成的最后一个。

1 个答案:

答案 0 :(得分:1)

我没有亲自使用过这个插件,但是如果你确信你有这个工作,我认为问题在于这部分代码:

      $('<ul/>', {
        'class': 'results',
        html: list.join('')
      }).appendTo('.wrap .items');

我假设您的列表数组包含所有数据,并且它不是一次只返回3个项目。因此list.join('')会将每个项目转储到html中。您将不得不遍历列表并使用模数运算符来创建ul。然后将它们附加到容器(可能是您的可滚动项容器)。

var html = "<ul>";
for(i = 0; i < list.length; i++)
{
    if(i % 3 == 0 && i > 0) {
        html += "</ul><ul>";
    }
    html += "<li>" + jsonData + "</li">;
}
html += "</ul>";

$("#items").append(html);