Question

我正在尝试建立一个由索引或目录组成的网站＆＃39; main＆＃39;页面，其中包含使用xml文件中的数据构建的多个虚拟页面的链接。我成功地对网站进行了硬编码，但是尝试从xml文件中提取文本并构建虚拟页面给我带来了困难，因为我使用的命令不起作用，或者出现语法错误或取决于我尝试的东西。

在目前的尝试中，我得到了：

uncaught error: syntax error, unrecognized expression: div data-role="header">

我的索引页面index.html看起来像这样

<html>
<head>
<meta charset="utf-8">
<title>Assignment2</title>
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" type="text/css" href="style.css"/>-->
<script type="text/javascript" src="jquery-2.2.0.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<link rel="stylesheet" href="jquery.mobile.min.css">
<script type="text/javascript" src="jquery.mobile.min.js"></script>
<link rel="stylesheet" href="jquery-ui.css">
<script type="text/javascript" src="jquery-ui.min.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="javascript.js"></script>
</head>

<body>
<div data-role="page" id="index">
    <div data-role="header">
        <h1>Anime Watching This Season</h1>
    </div>

    <div data-role="main" class="ui-content">
        <ul data-role="list-view">
            <li><a href="#erased">Erased</a></li>
            <li><a href="#active_raid">Active Raid</a></li>
            <li><a href="#dimension_w">Dimension W</a></li>
            <li><a href="#grimgar">Grimgar of Fantasy and Ash</a></li>
            <li><a href="#konosuba">KonoSuba</a></li>
        </ul>
    </div>

    <div data-role="footer" class="center">
        <p>You are on the homepage</p>
    </div>    
</div>
</body>
</html>

我的JavaScript文件javascript.js如下所示：

$(document).ready(function(){

    $.ajax ({
            type: "GET",
            url: "series.xml",
            dataType: "xml",
            success: parseXML
        });


    function parseXML (mydoc)
    {

        $(mydoc).find("series").each(function(){
            //$("#output").append ("<div> trial div</div>");
            $("<div data-role=\"page\" >").attr('id', ($(this).attr("title")) ).appendTo('body');
            $("div data-role=\"header\">").appendTo('body');
            $("<h1>" + ($(this).find("name").text()) + "</h1>").appendTo('body');
            $("</div>").appendTo('body');
            $("div data-role=\"main\" class=\"ui-content\">" + "</div>").appendTo('body');
            $("div data-role=\"footer\" class=\"center\">" + "</div> </div>").appendTo('body');

            $("#inbody").append("<div data-role=\"page\" id=\"erased\"");
            //$("<div data-role=\"page\" id=\"").appendTo("body");  
            //$(this).find("name").appendTo("body");
            //$("\">").appendTo("body");

        });
    }

});

，名为series.xml的xml文件看起来像这样

<anime>
<series title="erased">
<name>Erased</name>
<description>some text</description>
<description>some text</description>
<description>some text</description>
<image>erased.jpeg</image>
</series>

<series title="active_raid">
<name>Active Raid</name>
<description>some text</description>
<description>some text</description>
<image>active_raid.jpeg</image>
</series>

<series title="dimension_w">
<name>Dimension W</name>
<description>some text</description>
<description>some text</description>
<description>some text</description>
<image>dimension_w.jpeg</image>
</series>

<series title="grimgar">
<name>Grimgar of Fantasy and Ash</name>
<description>Awaken...</description>
<description>some text</description>
<description>some text</description>
<description>some text</description>
<image>grimgar.jpeg</image>
</series>

<series title="konosuba">
<name>KonoSuba</name>
<description>some text</description>
<description>some text</description>
<description>some text</description>
<image>konosuba.jpeg</image>
</series>
</anime>

我之前尝试过搜索解决方案，但是我发现的信息越多，它就会越混乱，所以如果有人能指出我正确的方向或解释如何构建这个，那将非常感激。< / p>

Answer 1

您在<内遗漏了很多>和$(...)。这有点莫名其妙，因为你有一半的正确语法。请仔细检查您的语法。

$(mydoc).find("series").each(function(){
            //$("#output").append ("<div> trial div</div>");
            $("<div data-role=\"page\" >").attr('id', ($(this).attr("title")) ).appendTo('body');
            $("<div data-role=\"header\">").appendTo('body');
            $("<h1>" + ($(this).find("name").text()) + "</h1>").appendTo('body');
            $("</div>").appendTo('body');
            $("<div data-role=\"main\" class=\"ui-content\">" + "</div>").appendTo('body');
            $("<div data-role=\"footer\" class=\"center\">" + "</div>").appendTo('body');

            $("#inbody").append("<div data-role=\"page\" id=\"erased\">");
            //$("<div data-role=\"page\" id=\"">).appendTo("body");  
            //$(this).find("name").appendTo("body");
            //$("\">").appendTo("body");

        });

你可能有更多，我试图清理它的大部分，但我不知道你的目标HTML结构。

Answer 2

好的，它花了很多试验和错误，但我设法得到了我想要的结果。这就是我的脚本文件的样子。

$(document).ready(function(){

    $.ajax ({
            type: "GET",
            url: "series.xml",
            dataType: "xml",
            success: parseXML
        });

        //$("body").append("<div> this is a test</div>");
    function parseXML (mydoc)
    {

$(mydoc).find("series").each(function(){
$("body").append($("<div data-role=\"page\" >").attr('id', ($(this).attr("title"))).append("<div data-role=\"header\"> <h1>" + $(this).find("name").text() + "</h1> </div> <div data-role=\"main\" class=\"ui-content\"> <img src=\"" + $(this).find("image").text() + "\" width=\"225\" height=\"321\"/>  <p>" + $(this).find("description").text() + "</p></div> <div data-role=\"footer\" class=\"center\"> <a href=\"#index\" class=\"ui-btn ui-icon-home ui-btn-icon-notext\"></a> </div>"));


        });
    }

});

每当我试图将其分解为更小的更容易阅读的部分时，jquery会过早地关闭我的div标签，但是这样可以

使用jquery和xml构建虚拟网页

2 个答案: