jQuery嵌套的XML元素
jQuery nested XML elements
我有一个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>
我正试图用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>");
它似乎不喜欢嵌套元素的想法,并返回了一个非常混乱的讨论。
有什么线索可以让这个展示变得好看吗?(即不混乱)
EDIT: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("</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>");
});
相关文章:
- 使用Jquery添加XML元素
- 如何使用Extendscript scriptui插入、更新、删除XML元素的值
- 使用 javascript 中的表单元素构建一个 xml 字符串
- 从XML字符串创建DOM元素,如何使用.getElementsByName()
- 如何使用javascript查找从xml中检索到的元素数量
- 为什么使用自定义标记创建元素会在 IE9 或 10 的 outerHTML 中添加 xml 命名空间,直到调用 .fin
- 设置名称与 XML 的名称生产不匹配的 DOM 元素的属性
- 如何在IE上创建xml元素并添加nodeValue
- 在javascript中获取xml dom子元素
- 从 XML 元素获取文本
- 无法使用 jquery 获取 xml 元素文本值
- 获取 XSLT 中的 XML 元素
- 从 XML 获取元素时出现问题
- 未捕获的语法错误:无法在“元素”上设置“innerHTML”属性:提供的标记是无效的 XML
- 根据元素的值从 XML 文件中提取文本
- 如何使用 Jquery 获取 XML 文件,并在每次加载时以随机顺序显示元素一次
- 如何在javascript中解析xml并从中提取xslt元素
- 在jQuery的XML文档中选择和操作DOM中的元素
- Ajax 对 xml 页面的响应以获取标题元素不起作用
- 如何在 jQuery 中读取 xml 文件内容并在 html 元素中显示