Question

我有一个非常简单的代码，但我敢打赌它写的很糟糕。我尝试在数组中创建一些对象，然后使用jQuery list方法构建.each()。

我认为这很简单，但我只是在学习......

这是我写的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>');
    }
});

Fiddle

Answer 2

jQuery＆＃39; s .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);
});

Example

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>');
});

<强> Demo

使用jQuery从对象数组构建匹配元素的列表

4 个答案: