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

发布于 2024-12-06 19:57:12 字数 700 浏览 1 评论 0原文

我有一个 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中。该解决方案需要是动态的，因为它可能有很多类别。

原文

I have an xml document that looks something like this

<?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>

I am parsing the XML into my javascript document.
Now, I want to group the output of my xml file in different divs base on the cat in the xml so that the markup would look something like this

<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>

My parsing is working properly but I don't know how I would group the entries and then output them into different divs. The solution needs to be dynamic since it could be a lot of categories.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

放飞的风筝 2024-12-13 19:57:12

使用 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 是一个返回

123 cat A 的函数。 for - 希望您可以轻松编写它。

更新

更新了代码以首先添加一个div。我假设您将所有 div 存储在容器中（div、td，无论什么...），并使用 id="注释”

Using jQuery and assuming you have your xml in a variable xml, try this:

$(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 is a function that returns <li>123 cat A</li> for <annotation cat="A" title="123" type="pointer"/> - hopefully, you can easily write it.

UPDATE

Updated the code to add a div first. I assumed that you store all your divs in a container (div, td, whatever...) with id="annotations"

回复收藏 0 原文

~没有更多了~