解析输出并设置xml数据的样式

parse output and style xml data

本文关键字：数据 样式 xml 设置 输出      更新时间：2023-09-26

我在远程服务器上找到了以下格式的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函数，但在那之后我就迷失了方向。有人知道怎么做吗？任何帮助都将不胜感激。

我制作了一个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 { ... }
相关文章：