Question

我有一个看起来像这样的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>

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

Answer 1

使用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));
});

getLiFromXml是一个为<li>123 cat A</li>返回<annotation cat="A" title="123" type="pointer"/>的函数 - 希望您可以轻松编写它。

<强>更新

更新了首先添加div的代码。我假设您将所有div存储在一个容器（div，td，无论......）中id="annotations"

按字母或其他属性分组javascript xml

1 个答案: