使用jQuery從對象數組構建匹配元素的列表

Question

我有一個非常簡單的代碼，但是我敢打賭它的編寫確實很糟糕。 我試圖在數組中創建一些對象，然后使用jQuery .each()方法構建list 。

我認為這很簡單，但我只是在學習...

這是我編寫的jQuery代碼：

$(document).ready(function () {
    //items
    var armas = {
        BK: {
            mano_izq: [{
                type: 2,
                index: 5,
                name: "juan"
            }, {
                type: 2,
                index: 5,
                name: "juancho"
            }]
        },
        MG: {
            mano_der: [{
                type: 2,
                index: 5,
                name: "juan2"
            }, {
                type: 2,
                index: 5,
                name: "juan3"
            }]
        }
    };

    //controles
    $("#selec").on("click", function (e) {
        e.preventDefault();
        $(".itemlist").each(armas.BK.mano_izq, function (i, value) {
            $(this).append('<li>'+ value.name +'</li>');
        });
    });
});

如您所見，在該示例中，我正在嘗試構建此列表（可惜沒有成功）

<ul class="itemlist">
    <li>juan</li>
    <li>juancho</li>
    <li>juan2</li>
    <li>juan3</li>
</ul>

您可以在這里查看我的小提琴： http : //jsfiddle.net/Frondor/xbcxy8ur/

Answer 1

您應該遍歷對象，而不是遍歷列表。

$("#selec").on("click", function (e) {
    e.preventDefault();
    var $itemlist = $(".itemlist");
    $.each(armas.BK.mano_izq, addLi);
    $.each(armas.MG.mano_der, addLi);
    function addLi(i, elem){
        $itemlist.append('<li>'+ elem.name +'</li>');
    }
});

小提琴

Answer 2

jQuery的.each()遍歷jQuery對象。 對於常規對象，您需要使用$ .each（） ，它可以遍歷任何集合。

$("#selec").on("click", function (e) {
    e.preventDefault();
    $.each(armas.BK.mano_izq, function (i, value) {
        $('.itemlist').append('<li>'+ value.name +'</li>');
    });
    $.each(armas.MG.mano_der, function (i, value) {
        $('.itemlist').append('<li>'+ value.name +'</li>');
    });
});

Answer 3

您可以使用$.map規范化數據，像這樣

var data = $.map(Object.keys(armas), function (el) {
   return $.map(Object.keys(armas[el]), function (key) {
       return armas[el][key];  
   });
});

$("#selec").on("click", function (e) {
    e.preventDefault();

    var list = $.map(data, function (el) {
        return '<li>' + el.name + '</li>';
    });

    // only once dom operation 
    $('.itemlist').html(list);
});

例

Answer 4

$.each(armas.BK.mano_izq, function (i, value) {
   $(".itemlist").append('<li>'+ value.name +'</li>');
});

$.each(armas.MG.mano_der, function (i, value) {
        $(".itemlist").append('<li>'+ value.name +'</li>');
});

演示版