我已经构建了一些返回部分产品目录的 ajax,并且我正在尝试将 xml 输出到文档中,到目前为止,这是我所拥有的:
$("#catalog").append("<table><tr><th></th><th>Item Name</th><th>Price</th><th>Description</th></tr>");
$(data).find("item").each(function() {
$("#catalog").append("<tr>"+
"<td style='valign:top'><img src='"+$(this).find("["link").text()+"' /></td>"+
"<td>"+$(this).find("title").text()+"</td>"+
"<td>"+$(this).find("price").text()+"</td>"+
"<td style='valign:top'>"+$(this).find("description").text()+"</td>"+
"</tr>"
);
});
$("#catalog").append("</table>");
我希望这会将表的开头写入文档,然后是每个数据行,最后是末尾的 。相反,当我在页面上查看源代码时,我得到了这个...
<div id="catalog">
<table>
<tr>
<th></th>
<th>Item Name</th>
<th>Price</th>
<th>Description</th>
</tr>
</table>
<tr>
<td style="valign:top"><img src="http://image1.jpg"></td>
<td>Item1</td>
<td>Price1</td>
<td style="valign:top">Description1</td>
</tr>
<tr>
<td style="valign:top"><img src="http://image2.jpg"></td>
<td>Item2</td>
<td>Price2</td>
<td style="valign:top">Description2</td>
</tr>
<tr>
<td style="valign:top"><img src="http://image3.jpg"></td>
<td>Item3</td>
<td>Price3</td>
<td style="valign:top">Description3</td>
</tr>
</div>
请注意如何在表末尾添加数据,即使 .append("") 行位于 .each() 之后。
这让我相信代码没有按顺序执行,并且 .each() 函数正在演示一些并发性。这让我很困惑,因为 jquery api 没有提到回调,所以我发现自己有点不知所措,不知道到底发生了什么以及我应该做什么才能让它正确显示。任何帮助将不胜感激。
最佳答案
改变
$(data).find("item").each(function() {
$("#catalog").append(...
至
$(data).find("item").each(function() {
$("#catalog table").append(...
没有并发问题,您要将行附加到父 div 而不是表。
另一个注意事项: 您不需要附加最后一个表,只需将其放入初始附加中即可,
$("#catalog").append("<table><tr><th></th><th>Item Name</th><th>Price</th><th>Description</th></tr></table>");
关于JQuery .each() 并发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6791496/