Javascript for循环按类别答案

【问题标题】：Javascript for loop by categoryJavascript for循环按类别
【发布时间】：2014-05-27 18:13:59
【问题描述】：

我有以下代码循环遍历一组要放入列表的标签：

    for(var i = 0; i < data.tags.length; i++) {
               var tag = data.tags[i];  
               var item = '<li><input type="checkbox" value="' + tag.id + '"><label class="disabled">' + tag.tag_name + '</label></li>';
               $('ul').append(item);
    }

然而，每个标签都有与之关联的三个类别之一（tag.category），我想为每个类别创建一个新列表。

我怎样才能只获得唯一的类别并为每个部分显示我想要的标签，例如：

<h1>Category 1</h1>
<ul>
<li>tag</li>
<li>tag</li>
</ul>
<h1>Category 2</h1>
<ul>
<li>tag</li>
<li>tag</li>
</ul>
<h1>Category 3</h1>
<ul>
<li>tag</li>
<li>tag</li>
<li>tag</li>
</ul>

【问题讨论】：

@DontVoteMeDown - 每个标签都有与之关联的三个类别之一（tag.category）
我当然希望您将该脚本包装在正确的标签中
@user2994560，您的问题得到解答了吗？如果是这样，请标记答案以接受它。如果没有，请说明仍然存在哪些问题。

标签： javascript jquery loops for-loop

【解决方案1】：

我想这就是你想要做的。如果尚未为该类别创建标题/列表，则创建一个标题/列表，然后附加该项目......如果该类别已经存在，只需附加到现有的。

JSFiddle - 我用我认为代表您真实数据的数据填充了 data.tags。您会注意到所有标签都附加到了正确的类别列表中。

var $lists = $("#lists");
for (var i = 0; i < data.tags.length; i++) {
    var tag = data.tags[i];
    var item = '<li><input type="checkbox" value="' + tag.id + '"><label class="disabled">' + tag.tag_name + '</label></li>';
    if(!$lists.children("#"+tag.category).length) {
        $lists.append("<h1>"+tag.category+"</h1><ul id="+tag.category+"></ul>");
    }
    $("#"+tag.category).append(item);
}

注意：如果您的页面上有一个可以与类别名称协调的 ID，您可能希望将 ul 的 ID 更改为 "category" + tag.category + "List" 之类的内容，以防止 ID 重叠.如果这样做，您还需要更改选择器 ("#"+tag.category) 以匹配。

注意2：无论您的data 有多少个类别，上述方法都有效。因此，如果有新类别可用，则无需修改代码。 JSFiddle

注意 3： 由于我不确定您对 HTML/JS/JQuery 的熟悉程度，我想我应该指出我为 ID 为 lists 的列表创建了一个容器.这样当我们创建一个新列表时，我们就有了放置它的地方。

【讨论】：

【解决方案2】：

您需要以某种方式跟踪哪些类别已经通过，因为我认为它们可能以不同的顺序出现。您可以通过使用类别作为标识符的类别对象来执行此操作，从而可以轻松检查它是否在之前的迭代中通过。

我做了一个快速的 jsfiddle，它也很粗糙，因为它使用类别对象来存储 html。然后最后只遍历该对象以显示正确类别下的每个项目。

var data = [
    {
        id: 1,
        name: 'a',
        category: 'A'
    },
    {
        id: 2,
        name: 'b',
        category: 'B'
    },
    {
        id: 3,
        name: 'aa',
        category: 'A'
    }
];

var categories = {};

data.forEach(function(tag) {

    if (!categories[tag.category]) {
        categories[tag.category] = "<h1>" + tag.category + "</h1>";
    }

    categories[tag.category] += "<div>id: "+ tag.id +" - name: " + tag.name + "</div>";

});

var html = "";
var cat;

for (cat in categories) {
    html += categories[cat];
}

document.body.innerHTML = html;

http://jsfiddle.net/JXmHr/

【讨论】：