jquery解析xml并按元素值分组

Question

我有以下 xml，我使用 jquery 解析它。

然而，我坚持只显示按标题分组的城市和日期。 我怎样才能解析xml，以便最终输出像这样

Test event 1 - oslo(2011/08/11), dallas(2011/11/11)

Test event 2 - new york(...), Seattle( ...）

任何帮助将不胜感激，

谢谢， 特里

<root>
    <item guid="np_108886">
        <title>Test event 1</title>
        <description>lorem ipsum</description>
        <specfields>
            <city>oslo</city>
            <startdate>2011/08/11</startdate>
        </specfields>
    </item>

    <item guid="np_108886">
        <title>Test event 1</title>
        <description>lorem ipsum</description>
        <specfields>
            <city>dallas</city>
            <startdate>2011/11/11</startdate>
        </specfields>
    </item>

    <item guid="np_108886">
        <title>Test event 2</title>
        <description>lorem ipsum</description>
        <specfields>
            <city>new york</city>
            <startdate>2011/09/11</startdate>
        </specfields>
    </item>
    <item guid="np_108886">
        <title>Test event 2</title>
        <description>lorem ipsum</description>
        <specfields>
            <city>seattle</city>
            <startdate>2011/09/11</startdate>
        </specfields>
    </item>
</root>

Answer 1

http://jsfiddle.net/XnmNU/6/ - 工作 jFiddle {编辑子选择器！}

我的版本将以前的标题与当前的标题进行比较，以确定它是否是骗局，抱歉，我没有时间绝对优化我正在工作的代码:(

输出>
开始
测试活动1——奥斯陆 (2011/08/11)
达拉斯 (2011/11/11)
测试活动2——纽约 (2011/09/11)
西雅图 (2011/09/11)

$("document").ready(function(){
    var xml = "<root>     <item guid='np_108886'>         <title>Test event 1</title>         <description>lorem ipsum</description>         <specfields>             <city>oslo</city>             <startdate>2011/08/11</startdate>         </specfields>     </item>      <item guid='np_108886'>         <title>Test event 1</title>         <description>lorem ipsum</description>         <specfields>             <city>dallas</city>             <startdate>2011/11/11</startdate>         </specfields>     </item>      <item guid='np_108886'>         <title>Test event 2</title>         <description>lorem ipsum</description>         <specfields>             <city>new york</city>             <startdate>2011/09/11</startdate>         </specfields>     </item>     <item guid='np_108886'>         <title>Test event 2</title>         <description>lorem ipsum</description>         <specfields>             <city>seattle</city>             <startdate>2011/09/11</startdate>         </specfields>     </item> </root>",     xmlDoc = $.parseXML( xml ); xml = $(xmlDoc);

    try
  {
  $(xml).find('[nodeName=item]').each(function(){    if ($(this).index() != 0) {
      possitionTitle = $(this).prev();
     if ($(this).children('title').text() != possitionTitle.children('title').text() ) {
                $("div").append("</li><li>"+$(this).children('title').text()+" -- "+$(this).children("specfields").children("city").text()+" ("+$(this).children("specfields").children("startdate").text()+")");
                } else {
                    $("div").append($(this).children("specfields").children("city").text()+" ("+$(this).children("specfields").children("startdate").text()+")");
                }
        } else {
            $("div").append("Start<li>"+$(this).children('title').text()+" -- "+$(this).children("specfields").children("city").text()+" ("+$(this).children("specfields").children("startdate").text()+")");
        }
        $("div").append("</li>");

    });

  }
catch(err)
  {
  alert(err);
  }

});
<div></div>

Answer 2

希望这有帮助。我已经测试并创建了一个js小提琴： http://jsfiddle.net/xDqZK/

基本上一旦你有了如果你在 javscript 中使用 xml，你可以使用 jquerys parseXML() 函数将其获取到 jquery 对象中。进入对象后，您可以搜索不同的节点并使用 $.find() 方法在它们内进行迭代。一件棘手的事情是，如果你想获取节点的值，你需要使用 .text()。我正在使用 .val() 和 .hmtl() 返回未定义。

var strXml ="<root><item guid=\"np_108886\"><title>Test event 1<\/title><description>lorem ipsum<\/description><specfields><city>oslo<\/city><startdate>2011\/08\/11<\/startdate><\/specfields><\/item><item guid=\"np_108886\"><title>Test event 1<\/title><description>lorem ipsum<\/description><specfields><city>dallas<\/city><startdate>2011\/11\/11<\/startdate><\/specfields><\/item><item guid=\"np_108886\"><title>Test event 2<\/title><description>lorem ipsum<\/description><specfields><city>new york<\/city><startdate>2011\/09\/11<\/startdate><\/specfields><\/item><item guid=\"np_108886\"><title>Test event 2<\/title><description>lorem ipsum<\/description><specfields><city>seattle<\/city><startdate>2011\/09\/11<\/startdate><\/specfields><\/item><\/root>";
var xml = $.parseXML(strXml);

$("#test").html((parse(xml,"Test event 1")));

function parse(xml, strEvent)
{
    var eventStr = "",$xml = $(xml);
    $xml.find("item").each(function(){
        if($(this).find("title").text().toLowerCase() == strEvent.toLowerCase()){
           var childNode = $(this).find("specfields")
           eventStr += childNode.find("city").text();
           eventStr += " (" + childNode.find("startdate").text() + ") ";
        }
    });
    return eventStr;
}

超文本标记语言

<div id="test></div>

Answer 3

像这样的东西应该可以工作（未经测试）：

$(document).ready(function()
{
  $.ajax({
    type: "GET",
    url: "YOUR XML",
    dataType: "xml",
    success: parseXml
  });
});

function parseXml(xml){
    $(xml).find("title").filter(function(){
                $(this).text() == "Test event 1";
         }).each(function(){
             $("#dataDiv").append($(this).find("city").text();
             $("#dataDiv").append("(" + $(this).find("startdate").text() + "),");
     });

     $(xml).find("title").filter(function(){
                $(this).text() == "Test event 2";
         }).each(function(){
             $("#dataDiv").append($(this).find("city").text();
             $("#dataDiv").append("(" + $(this).find("startdate").text() + "),");
     });  

}

其中 #dataDiv 和 #dataDiv2 是页面上只有 测试事件 1 或 的 div在其中测试事件 2。