的jQuery嵌套的XML元素

Question

我有一个看起来像这样

<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> 

而我试图用jQuery读通过一个XML文件。目前我正在使用这块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>"); 

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

任何关于如何使这个显示很好的线索？ （即不混乱）

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

Answer 1

您的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("</div>");，您不能将元素添加到dom中。
实际上，带有开始标记的行（例如$(target).append("<div class='postHeader'>");）是唯一必需的，结束标记的附加操作不起作用。

现在所提出的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>"); 
}); 

---

对于当前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>"); 
});