Группировать вывод javascript xml по буквам или другим атрибутам

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-файла в другую базу divs для cat в xml, чтобы разметка выглядела примерно так

<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"/> - надеюсь, вы легко можете написать ее.

UPDATE

Обновлен код для добавления div первым. Я предположил, что вы храните все свои div в контейнере (div, td, что угодно ...) с id="annotations"