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

我希望这会将表的开头写入文档，然后是每个数据行，最后是末尾的 。相反，当我在页面上查看源代码时，我得到了这个...

<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 没有提到回调，所以我发现自己有点不知所措，不知道到底发生了什么以及我应该做什么才能让它正确显示。任何帮助将不胜感激。

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