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

【问题标题】：Build a list of matched elements from an Array of Objects with jQuery使用 jQuery 从对象数组中构建匹配元素列表
【发布时间】：2015-01-24 12:12:39
【问题描述】：

我得到了一个非常简单的代码，但我敢打赌它写得非常糟糕。我尝试在数组中创建一些对象，然后使用 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/

【问题讨论】：

标签： jquery arrays javascript-objects each

【解决方案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

【讨论】：

我更喜欢使用 $.map() 方法而不是这个，但是 +1 缓存 addLi 函数
嗯，其实$.map() 另有目的。此方法旨在将一个数组转换为另一个数组，而不仅仅是遍历它，即使翻译 include 迭代也是如此。但是，如果您想编写更明显（== 更易于维护）的代码，请使用 API 方法来实现其预期目的。不幸的是，使用 jQuery $.map() 确实比 $.each() 更方便，因为 $.each() 设计中的缺陷（迭代器作为第一个参数）但在其他“瑞士刀”库中（例如下划线）each 肯定更好。跨度>

【解决方案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>');
    });
});

【讨论】：

你能告诉我jQuery-objects和普通的有什么区别吗？语法有区别吗？
jQuery-objects 是DOM-元素（例如 div、段落、标题等）包裹在一个 jQuery 容器中，其中包含所有 jQuery 方法（例如 .each(), .html(), .append()... ）。你可以在这里阅读更多关于它们的信息：learn.jquery.com/using-jquery-core/jquery-object。

【解决方案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

【讨论】：

【解决方案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

【讨论】：