JQuery .each () параллелизм - PullRequest
Новая
       10

JQuery .each () параллелизм

2 голосов
/ 22 июля 2011

Я построил некоторый 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 не упоминаются обратные вызовы, поэтому я немного растерялся относительно того, что именно происходит, и что я должен сделать, чтобы это правильно отображалось.Любая помощь будет высоко ценится.

Ответы [ 2 ]

5 голосов
/ 22 июля 2011

изменить 

$(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>");
0 голосов
/ 22 июля 2011

Вот более чистый способ сделать это> Я предполагаю, что «ссылка, заголовок, цена и описание» - это классы, которые вы использовали в селекторе поиска. 

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(''));
...