Javascript jQuery嵌套的XML元素_Javascript_Jquery_Xml

Javascript jQuery嵌套的XML元素

javascript jquery xml

Javascript jQuery嵌套的XML元素,javascript,jquery,xml,Javascript,Jquery,Xml,我有一个如下所示的XML文件 <posts> <post> <username>MarchHare</username> <date><day>4</day><month>May</month><year>2013</year></date> <time><hour>18</hour><m

我有一个如下所示的XML文件

<posts>
<post>
    <username>MarchHare</username>
    <date><day>4</day><month>May</month><year>2013</year></date>
    <time><hour>18</hour><minute>0</minute><seconds>8</seconds></time>
    <text>Have some wine.</text>
    <post>
        <username>Alice</username>
        <date><day>4</day><month>May</month><year>2013</year></date>
        <time><hour>18</hour><minute>0</minute><seconds>19</seconds></time>
        <text>I don't see any wine.</text>
        <post>
            <username>MarchHare</username>
            <date><day>4</day><month>May</month><year>2013</year></date>
            <time><hour>18</hour><minute>0</minute><seconds>28</seconds></time>
            <text>There isn't any.</text>
            <post>
                <username>Alice</username>
                <date><day>4</day><month>May</month><year>2013</year></date>
                <time><hour>18</hour><minute>0</minute><seconds>51</seconds></time>
                <text>Then it wasn't very civil of you to offer it.</text>
                <post>
                    <username>MarchHare</username>
                    <date><day>4</day><month>May</month><year>2013</year></date>
                    <time><hour>18</hour><minute>1</minute><seconds>23</seconds></time>
                    <text>It wasn't very civil of you to sit down without being invited.</text>
                    <post>
                        <username>Alice</username>
                        <date><day>4</day><month>May</month><year>2013</year></date>
                        <time><hour>18</hour><minute>2</minute><seconds>3</seconds></time>
                        <text>I didn't know it was /your/ table, it's laid for a great many more than three.</text>
                    </post>
                </post>
            </post>
        </post>
    </post>
</post>
</posts>


马尔哈尔
2013年5月4日
1808
喝点酒。
爱丽丝
2013年5月4日
18019
我没看到酒。
马尔哈尔
2013年5月4日
18028
没有。
爱丽丝
2013年5月4日
18051
那么，你提出这个建议是不太礼貌的。
马尔哈尔
2013年5月4日
18123
你没有被邀请就坐下，这是不礼貌的。
爱丽丝
2013年5月4日
1823
我不知道它是/你的/桌子，它是为三个以上的人准备的。

我正试着用jQuery通读它。目前我正在使用这段js

 target.append("<div class='postList'>");
    $(data).find("post").each(function () {
        $(target).append("<div class='postHeader'>");
        $(".postHeader").append("<p class='user'>"+$(this).find("username").text()+"</p>");
        $(".postHeader").append("<p class='date'>"+$(this).find("day").text()+"/"+$(this).find("month").text()+"/"+$(this).find("year").text()+"</p>");
        $(".postHeader").append("<p class='time'>"+$(this).find("hour").text()+":"+$(this).find("minute").text()+":"+$(this).find("seconds").text()+"</p>");
        $(".postHeader").append("</div>");
        $(".postHeader").append("<div class='post'>");
        $(".post").append("<p>"+$(this).find("text").text())+"</p>";
        $(".post").append("</div>");
    });
$(target).append("</div>");

target.append（“”）；
$（数据）.find（“post”）.each（函数（）{
$（目标）。追加（“”）；
$（“.postHeader”）.append（“”+$（this）.find（“username”）.text（）+””）；
$（“.postHeader”）.append（“”+$（this.find）（“day”）.text（）+“/”+$（this.find”（“月”）.text（）+“/”+$（this.find”（“年”）.text（）+“”）；
$（“.postHeader”）.append（“”+$（this）.find（“hour”）.text（）+”：“+$（this）.find（“分钟”）.text（）+”：“+$（this）.find（“秒”）.text（）+””；
$（“.postHeader”）。追加（“”）；
$（“.postHeader”）。追加（“”）；
$（“.post”）.append（“”+$（this.find）（“text”）.text（））+“”；
$（“.post”）。追加（“”）；
});
$（目标）。追加（“”）；

这似乎不喜欢嵌套元素的想法，并且返回了一个非常混乱的讨论

有没有关于如何使这个显示效果更好的线索？（即不混乱）

编辑：无法更改XML。嵌套的存在是为了显示哪些帖子是回复，哪些帖子不是

您的XML结构不太符合逻辑，帖子不应该这样嵌套。考虑将其改为

<posts>
    <post>
        <username></username>
        <date><day></day><month></month><year></year></date>
        <time><hour></hour><minute></minute><seconds></seconds></time>
        <text></text>
    </post>
    <post>
        <username></username>
        <date><day></day><month></month><year></year></date>
        <time><hour></hour><minute></minute><seconds></seconds></time>
        <text></text>
    </post>
</posts>

现在来看看你的代码行，比如

target.append（“”），则不能向dom中添加部分元素。

事实上，带开始标记的行（例如，$（target）.append（“”；
）是唯一必需的，追加结束标记没有任何作用
现在，对于建议的XML，您可以使用以下内容来解析它
target.append("<div class='postList'>");
$(data).find("post").each(function () {
    var postHeader = $("<div class='postHeader'>").appendTo(target);
    postHeader.append("<p class='user'>"+$(this).find("username").text()+"</p>")
              .append("<p class='date'>"+$(this).find("day").text()+"/"+$(this).find("month").text()+"/"+$(this).find("year").text()+"</p>")
              .append("<p class='time'>"+$(this).find("hour").text()+":"+$(this).find("minute").text()+":"+$(this).find("seconds").text()+"</p>");
    var post = $("<div class='post'>").appendTo(postHeader);
    post.append("<p>"+$(this).find("text").text())+"</p>");
});

target.append（“”）；
$（数据）.find（“post”）.each（函数（）{
var postHeader=$（“”）。appendTo（目标）；
postHeader.append（“”+$（this）.find（“用户名”）.text（）+“”）
.append（“”+$（此）.find（“日”）.text（）+“/”+$（此）.find（“月”）.text（）+“/”+$（此）.find（“年”）.text（）+“”）
.append（“”+$（this）.find（“小时”）.text（）+：“+$（this）.find（“分钟”）.text（）+”：“+$（this）.find（“秒”）.text（）+””；
var post=$（“”）。appendTo（postHeader）；
post.append（“”+$（this.find）（“text”）.text（））+“”；
});


对于当前的XML，您可以使用
target.append("<div class='postList'>");
$(data).find("post").each(function () {
    var postHeader = $("<div class='postHeader'>").appendTo(target);
    postHeader.append("<p class='user'>"+$(this).children("username").text()+"</p>")
              .append("<p class='date'>"+$(this).find("> date day").text()+"/"+$(this).find("> date month").text()+"/"+$(this).find("> date year").text()+"</p>")
              .append("<p class='time'>"+$(this).find("> time hour").text()+":"+$(this).children("> time minute").text()+":"+$(this).find("> time seconds").text()+"</p>");
    var post = $("<div class='post'>").appendTo(postHeader);
    post.append("<p>"+$(this).children("text").text())+"</p>");
});

target.append（“”）；
$（数据）.find（“post”）.each（函数（）{
var postHeader=$（“”）。appendTo（目标）；
postHeader.append（“”+$（this）.children（“用户名”）.text（）+””）
.append（“”+$（this）.find（“>date-day”）.text（）+“/”+$（this.find（“>date-month”）.text（）+“/”+$（this.find（“>date-year”）.text（）+“”）
.append（“”+$（this）.find（“>time-hour”）.text（）+”：“+$（this）.children（“>time-minutes”）.text（）+”：“+$（this）.find（“>time-seconds”）.text（）+””；
var post=$（“”）。appendTo（postHeader）；
post.append（“”+$（this.children）（“text”）.text（））+“”；
});
我可能应该提到，XML是冻结的，不可编辑的。嵌套的存在是为了显示哪些线程是应答，哪些线程不是应答。