JQuery .each()并发

Question

我已经构建了一些返回产品目录部分的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>");

我希望这会将表的开头写入文档,然后是每个数据行,最后是</ 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("</ table>")行是在.each()之后.

这使我相信代码没有按顺序执行,而.each()函数正在演示一些并发性.这让我感到困惑,因为jquery api没有提到回调,所以我发现自己在究竟发生了什么以及我应该做些什么来让它正确显示时有点不知所措.任何帮助将非常感激.

Answer 1

更改

$(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>");