Question

这是一个扭转者，我正在与SOS的专家联系： - ）

基本上我正在阅读产品的XML文件，目的是将它们显示为HTML页面中的可点击记录，以便将它们引导到特定产品。由于XML文件中的记录数量可能会有所不同，因此我不想在HTML中进行硬编码 - 必须有与记录数量一样多的div。我有一个Jquery通过AJAX调用读取XML文件并循环遍历文件动态创建这些div。

如果动态创建div工作，我应该期待的HTML应该是这样的：

<div id="alldiv">
  <div id="record-1234">
    <table>
       <tr>
         <td>
           <img src="http://domainname.com/images/Products/1234.png" width="25%" height="25%" />
         </td>
         <td>
           <span> Description for product 1234</span>
         </td>
       </tr>
   </table>
  </div>
  <div id="record-1235">
    <table>
       <tr>
         <td>
           <img src="http://domainname.com/images/Products/1235.png" width="25%" height="25%" />
         </td>
         <td>
           <span> Description for product 1235</span>
         </td>
       </tr>
   </table>
  </div>

我的JQuery如下：

$(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>', {
               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 connect@mobikoupon.com");
     }
   });

我拥有的HTML包含以下代码：

<table style="width:310px; font-family:Verdana; font-size:13px; text-align:left;">
  <tr style="background-color:#000000; font-size:15px;">
    <td style="width:25%; text-align:center;">
<img id="imageFile" src="imgFile" width="25%" height="25%" />
    </td>
    <td style="width:40%; text-align:justify;">
    <span id='description'>description</span>
    </td>
  </tr>
 </table>

 <div id="alldiv" style="position:absolute; top:90px; left:0px; width:320px; text-align:center;"></div>

当我检查源代码时，HTML中似乎没有发生任何事情 - div没有按预期创建。谁能提供有关如何实现这一目标的见解？非常感谢

Answer 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 = $("<tr>").appendTo($("<table>").appendTo(newDiv));
             $("<td>").append($("<img>", { src: 'http://' + domainName + '/images/Products/' + categoryName + '/' + ListingID + '.png', width: "25%", height: "25%"})).appendTo(newRow);
             $("<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 connect@mobikoupon.com");
     }
   });

在jquery中的动态创建的div中追加标记动态标记元素

1 个答案: