0

jQueryを使用して配列からデータを変更/追加するページにHTMLがあります。可能であれば、jQueryを使用してHTML /Divとimgsrcを生成し、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/

私はappendを見てきましたが、それはひどく間違っています！

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 に答える