Question

我通常不会遇到使用jQuery循环遍历对象和数组的问题，但这让我很难过。

我有一个订单列表，我需要添加列表项来使用该对象。我试图遍历对象并为每个键和列表项内部创建一个列表项，我需要使用数组中的值创建另一个有序列表。

我可以让外部列表项正常工作但是当涉及到嵌套列表时，它们都会变成梨形。

var obj = {
    2: ['a','b','c','d','e'],
    3: ['a','b','c','d','e'],
    4: ['a','b','c','d','e'],
    5: ['a','b','c','d','e'],
};

$.each(obj, function(key, val) {
    // create the parent list items
    $('.list').append($('<li></li>').html('<a href="#">Row ' + key + '</a><ol></ol>'));

    // create the nested list items
    $.each(val, function(k, v) {
       // this is where it goes wrong
    });
});

我搜索了SO以寻求解决方案，但在其他地方却无法找到适合我的任何内容

Answer 1

在你的情况下，不确定“所有形状都是梨形”的意思，但是你的代码的轻微改写效果很好：

$(function () {

    var obj = {
        2: ['a','b','c','d','e'],
        3: ['a','b','c','d','e'],
        4: ['a','b','c','d','e'],
        5: ['a','b','c','d','e'],
    };
    
    $.each(obj, function(key, values) {
        var $li = $('<li></li>').appendTo(".list"),
            $a  = $("<a>", {text: 'Row ' + key}).appendTo($li),
            $ol = $('<ol></ol>').appendTo($li);
    
        $.each(values, function(i, val) {
           $("<li>", {text: val}).appendTo($ol);
        });
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ol class="list"></ol>

我建议使用$("<element>", {params: 'values'})语法在jQuery中创建包含未知数据的元素，以避免从一开始就出现任何转义问题。

另请注意，JavaScript中未定义对象键的迭代顺序。如果您依赖某个订单，则必须预先对对象键进行显式排序，并迭代排序键的数组而不是对象。

在这些情况下，将数组发送到客户端而不是对象通常会更容易（也更合适）。

循环遍历javascript对象并创建嵌套列表

1 个答案: