Question

我希望jQuery为每组产品制作新的ul。在每个ul的内部，每个集合中的所有项目都将被追加。结果出人意料;应该只有2 ul，但是 11 ul被追加。

我的jQuery

$.getJSON('/products.json', function (result) {
    var booksobj = result.ebooks.basic;

    /* EBOOKS*/
    $.each(booksobj.set, function(i, item) {
        $('#ebook').append('<ul>'); // Append new list sets
        $('#ebook ul').append('<li><a href="#" data-id="' + item.product_id + '" data-type="' + item.type + '">' + item.title + '</a></li>');
    });
});

products.json

{
    "ebooks": {
        "basic": {
            "set": [
                {
                    "title": "PDF Sample",
                    "product_id": 1,
                    "type": "ebook"
                },
                {
                    "title": "PDF Sample",
                    "product_id": 2,
                    "type": "ebook"
                }, // ...
            ],
            "set": [
                {
                    "title": "PDF Sample",
                    "product_id": 1,
                    "type": "ebook"
                },
                {
                    "title": "PDF Sample",
                    "product_id": 2,
                    "type": "ebook"
                }, // ...
            ]
        }
    }
}

提前致谢。

Answer 1

您正在循环set并且对于集合中的每个项目，您正在创建一个新的ul元素。您需要在创建ul的位置设置多个循环，然后为该部分添加所有li s。我更改了您的数据结构，您不需要set属性（并且它们相互重叠，因为属性名称是唯一的）。 basic现在是一个数组，由代表set的数组组成。

var data = {
    "ebooks": {
        "basic": [
            [
                {
                    "title": "PDF Sample 1",
                    "product_id": 1,
                    "type": "ebook"
                },
                {
                    "title": "PDF Sample 2",
                    "product_id": 2,
                    "type": "ebook"
                },
            ],
            [
                {
                    "title": "PDF Sample 3",
                    "product_id": 1,
                    "type": "ebook"
                },
                {
                    "title": "PDF Sample 4",
                    "product_id": 2,
                    "type": "ebook"
                },
            ]
        ]
    }
}


data.ebooks.basic.forEach(function(set) {
    var $list = $('<ul></ul>');
  
    set.forEach(function(pdf) {
        $list.append('<li>' + pdf.title +  '</li>')
    });
              
    $('#ebook').append($list);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ebook"></div>

Answer 2

看起来问题源于此代码段中的选择器：

  $('#ebook').append('<ul>'); // Append new list sets
  $('#ebook ul').append('<li><a href="#" data-id="' + item.product_id + '" data-type="' + item.type + '">' + item.title + '</a></li>');

选择器“$（'＃ebook ul'）”将不会在迭代中选择新添加的ul，而是将它附加到第一个匹配（因此第一个ul添加到#ebook div）。相反，尝试链接你的电话：

/* EBOOKS*/
$.each(booksobj.set, function(i, item) {
     $('#ebook').append('<ul>').append('<li><a href="#" data-id="' + item.product_id + '" data-type="' + item.type + '">' + item.title + '</a></li>');
});

变量中的JSON数据的工作示例：http://codepen.io/JasonGraham/pen/WxbvRo

Answer 3

你的问题是使用$（＆＃39; #ebook ul＆＃39;），另一个问题，为什么你使用密钥＆＃34; set＆＃34;两次？没有意义，

var data = {
"ebooks": {
    "basic": [
        [
            {
                "title": "PDF Sample 1",
                "product_id": 1,
                "type": "ebook"
            },
            {
                "title": "PDF Sample 2",
                "product_id": 2,
                "type": "ebook"
            },
        ],
        [
            {
                "title": "PDF Sample 3",
                "product_id": 1,
                "type": "ebook"
            },
            {
                "title": "PDF Sample 4",
                "product_id": 2,
                "type": "ebook"
            },
        ]
    ]
}
}


$.each(data.ebooks.basic, function(i, item) {
    $('#ebook').append('<ul>'); // Append new list sets
    $.each(item, function(i, item2) {
    $('#ebook ul:last').append('<li><a href="#" data-id="' + item2.product_id + '" data-type="' + item2.type + '">' + item2.title + '</a></li>');
});
});

请参阅fiddle

jQuery JSON根据数组集的数量附加ul

3 个答案: