如何將HTML（divs）+ jQuery代碼轉換爲僅生成HTML的jQuery

Question

我在頁面上有一些HTML，我使用jQuery從數組中修改/添加數據。我希望使用jQuery來生成HTML/Divs & img src，如果可能的話，停止使用HTML中所需的div數量來手動編輯每個頁面。我無法訪問此數據庫。

的HTML標記看起來是這樣的，我有複製和粘貼的項目的數組中的量：

<!-- START ITEM --><div class="itemWrapper"><a href="" class="itemLink"> 
<!-- IMG --><img src="" class="itemImage"></a> 
<!-- TITLE --><div class="itemTitle">T</div> 
<!-- INFO --><div class="itemDesc"></div></div> 
<!-- END ITEM --> 

而jQuery是對的document.ready：

var infoArray = [ 
      'ABC12_square','Square','Square Description Here', 
      'ABC13_polygon','Polygon','Polygon Description Here', 
      'ABC14_triangle','Triangle','Triangle Description Here', 
    ]; 
      $BoP = 'tag+info+here'; 
     
      i0 = 0; 
      i1 = 1; 
      i2 = 2; 
       
    $('.itemImage').each(function(index) { 
      $(this).attr("src", infoArray[i0]); 
      i0 = i0+3; 
      var prR = $(this).attr("src"); 
      var subprR = jQuery.trim(prR).substring(0, 5); 
      $(this).attr("src", "/images/info/"+prR+"_M.jpg"); 
      $(this).parent().attr("href", "/iteminfopopup.htm?codes="+prR+"&BoP="+$BoP).attr('rel', 'mygroup').addClass('BoP8 fancybox.iframe'); 
      $(this).parent().append('<img src="/images/info/'+subprR+'_H.jpg" class="itemHover" border="0" width="250" height="354">'); 
    }); 
        
    $(".itemTitle").each(function(index) { 
      $(this).text(infoArray[i1]); 
      i1 = i1+3; 
    }); 
     
    $(".itemDesc").each(function(index) { 
      $(this).text(infoArray[i2]); 
      i2 = i2+3; 
    }); 
    // Setup Fancybox 
  $(".BoP8").fancybox({ 
      closeBtn    : true, 
      maxWidth  : 467, 
      maxHeight  : 609, 
      fitToView  : false, 
      padding   : '5', 
      openEffect  : 'none', 
      loop: false, 
      closeEffect  : 'none', 
      nextEffect : 'none', 
      prevEffect : 'none' 
  }); 
    // Create image hover animation 
  $(".itemImage").hover(
     function() {$(this).animate({"opacity": "0"}, "fast");}, 
     function() {$(this).animate({"opacity": "1"}, "fast");} 
   ); 

小提琴：http://jsfiddle.net/ZuPnp/

我已經看過追加，但它繼續發生可怕的錯誤！

Answer 1

看看jQuery中的Clone函數。這可能是你在找什麼。更多信息可以在這裏找到：

http://api.jquery.com/clone/

這裏是你如何可以使用這樣一個例子：

<div id="holder"> 
<div class="itemWrapper"><a href="" class="itemLink"> 
<img src="" class="itemImage"></a> 
<div class="itemTitle">T</div> 
<div class="itemDesc"></div></div> 
</div> 

<script type="text/javascript"> 
    var infoArray = [ 
      'ABC12_square','Square','Square Description Here', 
      'ABC13_polygon','Polygon','Polygon Description Here', 
      'ABC14_triangle','Triangle','Triangle Description Here', 
     ]; 

$.each(infoArray, function(index, val){ 
    //Dont forget to set the new values offcourse. 
    $("div.itemWrapper").clone().appendTo("div#holder"); 
}); 
</script> 

Answer 2

更好地利用.prependTo()與.clone()

See examplehttp://jsfiddle.net/ipsjolly/fSAHp/

如果您想要顯示一個固定的數字你c用於循環