Question

我的xml位于远程服务器上，格式如下：

<query_results>
    <row id="1">
        <distance>...</distance>
        <post_title>...</post_title>
        <post_excerpt>...</post_excerpt>
        <ID>...</ID>
    </row
    <row id="2">
    .........................etc
</query_results>

我需要我的javascript以某种方式遍历每一行，以便我可以将每个行附加到我的html文档上的div中，并使用一个样式类，而不需要脚本太多关注每个元素的个别名称每一行。我使用过Jquery的解析XML函数，但之后我就迷失了。有人知道怎么做吗？任何帮助都很受欢迎。

Answer 1

我提出了 JSFiddle ，并为您的问题提供了可能的解决方案。它从此Gist加载您的示例XML。

在HTML中有一个占位符：

<div id="query_results"/>

您可以使用JQuery ajax加载文件：

$.ajax({
    type: "GET",
    url: "/url/to/your/file.xml",
    dataType: "xml",
    success: parser
});

在解析器函数中，您可以使用.find()和.children()来导航XML：

function parser(xml) {
    $(xml).find('query_results').children().each(function() {
        var row = $(this);
        var id  = row.attr("id");
        var rowContents = "";

        row.children().each(function() {
            var tag = $(this);
            var tagName = tag[0].tagName;
            rowContents += "<div class='"+tagName+"'>"+tag.text()+"</div>";
        });
        var newRow = "<div id='row"+id+"'>"+rowContents+"</div>";
        $("#query_results").append(newRow);
    }); 
}

我使用行ID和名称为每行DIV创建和ID，例如：

<div id="row1"> ... </div>

然后将每行中的标记名称用作类：

<div class="distance"> ... </div>
<div class="post_title"> ... </div>

上面的parser()函数会构建divs并将它们添加到占位符div。最终结果将是：

<div id="query_results">
    <div id="row1">
        <div class="distance">...</div>
        <div class="post_title">...</div>
        <div class="post_excerpt">...</div>
        <div class="ID">...</div>
    </div>
    <div id="row2">...</div>
</div>

然后，您可以使用选择器在CSS中设置结果样式，例如：

#query_results div { ... }
#query_results div div { ... }
#row1 .distance { ... }
#row2 .ID { ... }

解析输出和样式xml数据

1 个答案: