Question

我有以下代码循环通过一组标记放入列表：

    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>

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

注意：您可能希望将ul的ID改为"category" + tag.category + "List"，以防止重叠ID，如果您的网页上有ID可以协调带有类别名称。如果这样做，您还需要更改选择器（"#"+tag.category）以匹配。

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

Note3：由于我不确定您对HTML / JS / JQuery的熟悉程度，我想我应该指出我为ID为{{1的列表创建了一个容器}}。这样，当我们创建一个新列表时，我们就有了放置它的位置。

Answer 2

您需要以某种方式跟踪已经传递的类别，因为我认为它们可能以不同的顺序排列。您可以使用类别作为标识符来使用类别对象，以便在上一次迭代中检查它是否成功。

我做了一个快速的jsfiddle，它也非常粗糙，因为它使用类别objeect来存储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/

Javascript for循环按类别

2 个答案: