0

我在页面上有一些 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/

我看过追加，但它总是出现可怕的错误！

4

2 回答 2

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>
于 2012-05-21T11:07:29.417 回答
0

更好地.prependTo() 使用 .clone()

See example http://jsfiddle.net/ipsjolly/fSAHp/

如果要显示固定数字，可以使用 for 循环

于 2012-05-21T12:16:23.217 回答