0

サーバーから取得した JSON の結果がいくつかあります。私がやりたいことは、それらの最初の 3 つをループし、いくつかの HTML を作成し、その後、次の 3 つに対して同じことを行うことです。

私が持っているものは次のとおりです。

$.getJSON(url, function(data){                               

           var sliderHTML = "";

           $.each(data.collection.products, function(index, product){  

             sliderHTML += '<div class="rsContent">';
             sliderHTML += '<a class="rsLink" href="'+product.url+'">'+product.title+'</a>';  
             sliderHTML += '<img class="rsImg" src="'+image+'" />';   
             sliderHTML += '</div>';


       });

したがって、各ループは、3 つの画像とリンクを含む DIV rsContent を作成する必要があります。その後、3 つの新しい画像とリンクを含む新しい DIV rsContent を作成する必要があります。等々。次のようになります。

<div class="rsContent">
  <a class="rsLink" href="">product</a>  // product 1
  <img class="rsImg" src="" />

  <a class="rsLink" href="">product</a>  // product 2
  <img class="rsImg" src="" />

  <a class="rsLink" href="">product</a>  // product 3
  <img class="rsImg" src="" />
</div>

<div class="rsContent">
  <a class="rsLink" href="">product</a>  // product 1
  <img class="rsImg" src="" />

  <a class="rsLink" href="">product</a>  // product 2
  <img class="rsImg" src="" />

  <a class="rsLink" href="">product</a>  // product 3
  <img class="rsImg" src="" />
</div>

等....

私はかなり新しいので、これを機能させることができません。助言がありますか？

4

1 に答える 1

1

あなたはこのようなことをすることができます：

$.getJSON(url, function (data) {

    var sliderHTML = "";
    var i = 1;
    $.each(data.collection.products, function (index, product) {

        if (i == 1) {
            sliderHTML += '<div class="rsContent">';
        }

        sliderHTML += '<a class="rsLink" href="' + product.url + '">' + product.title + '</a>';
        sliderHTML += '<img class="rsImg" src="' + image + '" />';

        if (i == 3) {
            sliderHTML += '</div>';
            i = 1;
        }
        i++;
    });
    if(i != 1) sliderHTML += '</div>';

});

最後のグループに正確に3つの要素がない場合はif(i != 1) sliderHTML += '</div>';、ループ（または他の検証）の後に最後のDIV要素を閉じるために実行する必要があります。

于 2013-03-19T14:00:55.890 に答える