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

Answer 2

这是更干净的方法>我假设“链接、标题、价格和描述”是您在查找选择器中使用的类。

var markUp = [];
markup.push("<table><tr><th></th><th>Item Name</th><th>Price</th><th>Description</th></tr>");
var $this;
    $(data).find("item").each(function() {
        $this = $(this);
         markup.push("<tr>");
         markup.push("<td style='valign:top'><img src='"+$this.find(".link").text()+"' /></td>");
            markup.push("<td>"+$this.find(".title").text()+"</td>");
            markup.push("<td>"+$this.find(".price").text()+"</td>";
            markup.push("<td style='valign:top'>"+$this.find(".description").text()+"</td>");
            markup.push("</tr>");
    });
markup.push("</table>");

    $("#catalog").append(markup.join(''));