Javascript 按数组内容分组

Question

我在弄清楚如何在 javascript 中对某些变量进行分组时遇到了一些问题。

这是交易。

在我的案例中，我现在有一个包含类别 A-Z 类别的数组，但它可以是任何东西（动物 - 狗 - 猫 - 等）。

在另一个数组中，我有一个来自具有不同内容（标题、内容和类别）的 xml 文件的结果。在我的例子中，包含 A-Z 字母的类别对应于我的另一个数组中的类别。

所以我要做的是首先从类别数组中为每个类别输出一个 div。完成后，我想在每个 div 中添加匹配的类别项，形成我的另一个数组。

这是一个例子

我的类别数组的第一个输出：

<div id="A"></div>
<div id="B"></div>
<div id="C"></div>
<div id="D"></div>

其次，我想在这些 div 中添加具有匹配类别 A、B、C 等的数组对象。

<div id="A">
<div id="contentFromMyOtherArray"> this object comes from my other array and had the content category A </div>
<div id="contentFromMyOtherArray"> this object also comes from my other array and had the content category A still inside the A div </div>
</div>
<div id="B">
<div id="contentFromMyOtherArray"> this object comes from the array and had the content category B </div>
</div>

等等……

这甚至可能吗？

编辑： 我的第一个数组仅包含 A、B、C、D、E 等，因此当通过它进行迭代时 array[i] 我将得到 A B C D 等

我的第二个数组包含标题类别等，所以如果我只想拥有类别，我可以像这样 arrMarkers[i].category 那样遍历它。那将输出前。 A A A B B E E F F F 等基于每个数组的内容所包含的类别

Answer 1

假设您的数组定义如下：

var categories = ['A', 'B', 'C', 'D'];
var other = [];
other['A'] = ['item 1', 'item 2', 'item 3'];
other['B'] = ['item 4', 'item 5'];
other['C'] = ['item 6'];

然后尝试以下 jQuery 代码来创建 div：

$(document).ready(function() {    
    $.each(categories, function(index, category) {
        var categoryId = category.replace(/ /gi, '_');
        var newCategory = $('<div />').attr('id', categoryId);
        // you can set any other properties on this new div here using .attr()
        $.each(other[category], function(index, item) {
            var itemId = category + '_' + item.replace(/ /gi, '_');
            var newInnerDiv = $('<div />').attr('id', itemId);
            // set any other properties like text content, etc here
            newInnerDiv.appendTo(newCategory);
        });
        newCategory.appendTo('body');
    });
});

您可以在此处查看一个工作示例：http://jsfiddle.net/greglockwood/8F8hv/

如果您有任何问题，请告诉我。

Answer 2

如果 xml 中的数组可以设置为二维数组，则一切正常。请看他的例子：

html:

<div id="containerDiv">
    <div id="A"></div>
    <div id="B"></div>
    <div id="C"></div>
</div>

javascript/jQuery

var resultArray = [
    ["A", "Title1", "this object comes from my other array and had the content category A"],
    ["B", "Title2", "this object comes from my other array and had the content category B"],
    ["C", "Title3", "this object comes from my other array and had the content category C"],
    ["D", "Title4", "this object comes from my other array and had the content category D"],
    ["A", "Title5", "this object comes from my other array and had the content category A"],
    ["A", "Title6", "this object comes from my other array and had the content category A"],
    ["C", "Title7", "this object comes from my other array and had the content category C"],
    ["D", "Title8", "this object comes from my other array and had the content category D"],
    ["C", "Title9", "this object comes from my other array and had the content category C"],
    ["D", "Title10", "this object comes from my other array and had the content category D"],
    ["A", "Title11", "this object comes from my other array and had the content category A"],
    ["D", "Title12", "this object comes from my other array and had the content category D"],
    ["C", "Title13", "this object comes from my other array and had the content category C"],
    ["B", "Title14", "this object comes from my other array and had the content category B"]
];

$(document).ready(
    function() {
        var holderMap = new Array();
        $("div#containerDiv").children("div").each(
            function() {
                holderMap[$(this).attr("id")]=$(this);
            }
        );
        var elem = null;
        var value = null;
        $(resultArray).each(function() {
            elem = holderMap[$(this)[0]];
            value = $(this)[2];
            if(elem) {
                $(elem).html($(elem).html() + '<div id="contentFromMyOtherArray">' + value + '</div>');
            }
        });
    }
);

此代码是动态的，因此如果遇到未分类的项目，它会自动跳过。