按字母或其他属性对javascript xml输出进行分组

我有一个xml文档，看起来像这样

<?xml version="1.0" encoding="UTF-8"?>
<mapPoints>
<annotation cat="A" title="123" type="pointer"/>
<annotation cat="A" title="333" type="pointer"/>
<annotation cat="B" title="555" type="pointer"/>
</mapPoints>

我正在将XML解析到javascript文档中。 现在，我想根据xml中的cat将xml文件的输出分组到不同的div中，这样标记看起来就像这样

<div class="A">
<ul>
<li>123 cat A</li>
<li>333 cat A</li>
</ul>
</div>
<div class="B">
<ul>
<li>555 cat B</li>
</ul>
</div>

123 A类
333 A类


555 B类

---

我的解析工作正常，但我不知道如何将条目分组，然后将它们输出到不同的div中。解决方案需要是动态的，因为它可能有很多类别。

使用jQuery并假设您的xml包含在变量

xml

中，请尝试以下操作：

$(xml).find('mapPoints annotation').each(function() {
    var class = $(this).attr('cat');
    if ($('div.' + class).length == 0) {
        $('#annotations').append('<div class="' + class + '"><ul></ul></div>');
    }
    $('div.' + class + ' ul').append(getLiFromXml(this));
});

$（xml）.find（'mapPoints annotation'）.each（function（）{
var class=$（this.attr（'cat'）；
if（$（'div.+class）.length==0）{
$（“#注释”）。追加（“
”）；
}
$（'div.+class+'ul'）.append（getLiFromXml（this））；
});

getLiFromXml

是一个为

返回123 cat a的函数-希望您可以轻松编写它

更新

---

更新代码以首先添加

div

。我假设您使用

id=“annotations”

将所有

div

存储在容器中（

div

，

td

，无论什么…），谢谢您的回答！如果我有10个a类入口，那么所有入口都会创建一个新的a类div？我假设

$（'div.+class+'ul'）

是预先创建的。我将编辑这篇文章来说明这一点。