各divはAjaxを使用します

Question

商品リストを返すajaxメソッドを実装しました。divに商品を表示したいと思っています。つまり、商品数に応じて繰り返すこのdivがあることを意味しますpタグは、製品の名前は、私はこのコードを試してみましたが、それは私がこのケースで何をやったか

<div id="product" class="col-md-55"> 
<div class="thumbnail"> 
    <div class="image view view-first"> 
    <a href="#" data-toggle="modal" data-target=".bs-example-modal-lg"> 
     <img style="width: 100%; display: block;" alt="image" /> 
    </a> 
    <div class="mask"> 
     <p id="productName">...</p> 
    </div> 
    </div> 
</div> 
</div> 

Answer 1

を繰り返したい、このdiv要素の

$(document).ready(function() { 
    $.get("./products", function(data) { 
    $('#product').each(function() { 
     $(this).find("p").each(function() { 
     $("#productName").append(data.nameEn); 
     }); 
    }); 
    }); 
}); 

すべての内容は動作しませんでしたdivのコピーですが、隠されている "テンプレート"を作ります。次に、コールバックで、私が必要とする回数だけテンプレートcloneを修正し、productNameを修正してbeforeまたはafterでDOMに挿入し、隠し属性/クラスを削除します。ただし、IDは一意でなければならないため、#productNameは使用できません。

Answer 2

あなたができることは、idを削除し、それをクラスに入れ、各製品を繰り返します。このような何か：

HTML

<div class="product col-md-55"> 
<div class="thumbnail"> 
    <div class="image view view-first"> 
    <a href="#" data-toggle="modal" data-target=".bs-example-modal-lg"> 
     <img style="width: 100%; display: block;" alt="image" /> 
    </a> 
    <div class="mask"> 
     <p id="productName">blah</p> 
    </div> 
    </div> 
</div> 
</div> 

jQueryの

$('.product').each(function() { 
    $(this).find("p").each(function() { 
    // Do what ever you want with the content inside the `<p>` tag using $(this).html(). 
    alert($(this).html()); 
    }); 
}); 

の作業例：返されるの各エントリのために#product div要素のインスタンスのクローンを作成したいと仮定すると、https://jsfiddle.net/a2nbgere/

Answer 3

データセットをループして要素の新しいクローンを追加する必要があります。これを行うには、以下のようになります。 productNameにclassからidの変更に注意してください。

$.get("./products", function(data) { 
 
    data.forEach(function(item) { 
 
    var $clone = $('#product').clone().removeAttr('id'); 
 
    $clone.find('.productName').text(item.nameEn); 
 
    $clone.find('img').prop('src', item.imageUrl); // amend this property name to match the object 
 
    $clone.appendTo('#your-containing-element'); 
 
    }); 
 
});

<div id="product" class="col-md-55"> 
 
    <div class="thumbnail"> 
 
    <div class="image view view-first"> 
 
     <a href="#" data-toggle="modal" data-target=".bs-example-modal-lg"> 
 
     <img style="width: 100%; display: block;" alt="image" /> 
 
     </a> 
 
     <div class="mask"> 
 
     <p class="productName"></p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

あなたはJSONのitensにループを行うと、配列内の各要素のdiv要素を作成し、この作業の例を見てください。

//native JS for get the JSON 
 
var getJSON = function(url, callback) { 
 
    var xhr = new XMLHttpRequest(); 
 
    xhr.open('GET', url, true); 
 
    xhr.responseType = 'json'; 
 
    xhr.onload = function() { 
 
     var status = xhr.status; 
 
     if (status == 200) { 
 
     callback(null, xhr.response); 
 
     } else { 
 
     callback(status); 
 
     } 
 
    }; 
 
    xhr.send(); 
 
}; 
 

 
//you change this part for your json 
 
getJSON('https://jsonplaceholder.typicode.com/photos', function (err, data){createDivs(err, data);}); 
 

 
function createDivs(err, data) { 
 
    for (i = 0; i < data.length; i++) { 
 
    $("#items").append('<div id="'+ data[i].id +'" class="itemClass">"'+ \t data[i].title +'"</div> <div class="rectangle" style="background-image: \t url('+data[i].url+');"></div><br>'); 
 
    
 
    //just break after 10 
 
    if(i == 10){ 
 
    break; 
 
    } 
 
    } 
 
    
 
    }

.itemClass{ 
 
    width:200px; 
 
    height:40px; 
 
    background:grey; 
 
    color:white; 
 
} 
 

 
.rectangle{ 
 
    width:200px; 
 
    height:100px; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="items"></div>