jquery - For Each ループ追加 div

Question

forループを使用してjsonファイルから製品を読み込もうとしています。すべての製品について、div (div 内のすべてのアイテム) が必要です。読み込みには問題ありませんが、どういうわけか最初の項目データが次の項目と連結されているように見えます。私はネットソリューションを試してみましたが、最も近いものは親と関係があります。（私はまだjQueryに慣れていません）。各項目の div の量は正しく機能しています。

if($.isArray(item.product_Shorts)){
    $.each(item.product_Shorts, function(i, item){
        $('#CasualItems').append("<div class='title'>");
        $('.title').append(item.product_ID);
    });
}

現在、ID 3 と 4 の 2 つの製品があります (このために、タイトルの代わりに ID を表示しています。ありがとうございます。

Answer 1

これを試して：

if($.isArray(item.product_Shorts)){
    $.each(item.product_Shorts, function(i, item){
        $('#CasualItems').append("<div class='title'>").html(item.product_ID);
    });
}

Answer 2

最初のループでは、div を追加し、製品 ID 3 を (すべての「タイトル」クラスに) 追加します。2 番目のパスでは、div を追加してから、4 の製品 ID を追加します (ここでもすべての「タイトル」クラスに追加しますが、現在は 2 つになっています)。

代わりにこれを行うだけです：

$('#CasualItems').append("<div class='title'>").append(item.product_ID);

Answer 3

それは、すべてに追加しているためです.title div。idまたはインデックスで試してみてください。

$('.title').eq(i).append(item.product_ID);

Answer 4

idそれぞれにユニークを使用して、これを試してくださいdiv

if($.isArray(item.product_Shorts)){
    $.each(item.product_Shorts, function(i, item){
        $('#CasualItems').append("<div id='title'" + (i + 1) + ">");
        $('#title' + (i + 1)).append(item.product_ID);
    });
}