Добавление динамических разметки разметки в динамически создаваемых divs в jquery

Это твистер, и я обращаюсь к экспертам с SOS :-)

По сути, я читаю XML файл продуктов, и цель состоит в том, чтобы показать их как интерактивные записи на странице HTML, которые приведут их к определенным продуктам. Поскольку количество записей в файле XML может меняться, я не хочу жестко указывать в HTML - должно быть столько div, сколько количество записей. У меня есть JQuery, который читает в XML файле через вызов AJAX и проходит через файл, динамически создавая эти div.

HTML, который я ожидаю, должен выглядеть так, если динамическое создание divs работает:

<div id="alldiv"><code>&lt;div id="record-1234"&gt;
 &lt;table&gt;
 &lt;tbody&gt;&lt;tr&gt;
 &lt;td&gt;
 
 &lt;/td&gt;
 &lt;td&gt;
 &lt;span&gt; Description for product 1234&lt;/span&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;/tbody&gt;&lt;/table&gt;
 &lt;/div&gt;
 &lt;div id="record-1235"&gt;
 &lt;table&gt;
 &lt;tbody&gt;&lt;tr&gt;
 &lt;td&gt;
 
 &lt;/td&gt;
 &lt;td&gt;
 &lt;span&gt; Description for product 1235&lt;/span&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;/tbody&gt;&lt;/table&gt;
 &lt;/div&gt;</code>

  <p> Мой JQuery выглядит следующим образом:</p> <pre class="prettyprint linenums">$(document).ready(function () {
 var fullpath = window.location.href;
 var categoryName = (window.location.pathname.split('/')[2]).replace(".html", '');
 var domainName = fullpath.split('/')[2];

 $.ajax({
 type: "GET",
 url: "productcontent.xml",
 dataType: "xml",
 success: function (xml) {

 $(xml).find('row').each(function () {
 var ListingID = $(this).find('ListingID').text();
 var Description = $(this).find('Description').text();
 $('span#description').text(Description);
 $('img#imageFile').attr('src', 'http://' + domainName + '/images/Products/' + categoryName + '/' + ListingID + '.png');

 $('<div><code>', {
 id: "Listing" + ListingID
 }).appendTo('#alldiv');
 $("table").appendTo("(#{id:"
 Listing "+ListingID })");

 }


 });
 },
 error: function () {
 alert("No listing exists. Please check your URL. If you believe this is in error, please call us at 760-994-4555 or email us at [removed_email]");
 }
 });</code> <p> HTML, который у меня есть, имеет следующий код:</p> <pre class="prettyprint linenums"><table>
 <tbody><tr>
 <td>

 </td>
 <td>
 <span id="description">description</span>
 </td>
 </tr>
 </tbody></table>

Когда я проверяю источник, ничего не происходит в HTML - divs не создаются, как ожидалось. Может ли кто-нибудь объяснить, как я могу это достичь? большое спасибо

1 ответ

Попробуйте что-то вроде этого:

$(document).ready(function () {
 var fullpath = window.location.href;
 var categoryName = (window.location.pathname.split('/')[2]).replace(".html", '');
 var domainName = fullpath.split('/')[2];

 $.ajax({
 type: "GET",
 url: "productcontent.xml",
 dataType: "xml",
 success: function (xml) {
 var allDiv = $("#alldiv");

 $(xml).find('row').each(function () {
 var ListingID = $(this).find('ListingID').text();
 var Description = $(this).find('Description').text();

 var newDiv = $('<div>', {id: "record-" + ListingID}).appendTo(allDiv);
 var newRow = $("").appendTo($("").appendTo(newDiv));
 $("<table><tbody><tr><td>").append($("", { src: 'http://' + domainName + '/images/Products/' + categoryName + '/' + ListingID + '.png', width: "25%", height: "25%"})).appendTo(newRow);
 $("</td><td>").append($("<span>", { text: Description})).appendTo(newRow);
 }
 });
 },
 error: function () {
 alert("No listing exists. Please check your URL. If you believe this is in error, please call us at 760-994-4555 or email us at [removed_email]");
 }
 });
 </span></td></tr></tbody></table></div>

licensed under cc by-sa 3.0 with attribution.