javascript - 为什么 JQuery 不在每次迭代时创建一个新的 div？

Question

我试图在 for 循环中的每次迭代中为每个图像及其描述创建一个容器 div，但是 JQuery 将所有图像 div 和描述 div 集中到一个容器 div 中，这弄乱了整个布局.

我不确定它为什么这样做，特别是因为我正在创建一个新的容器 div 并在 for 循环中附加到它。

这是 JSFiddle:https://jsfiddle.net/ZEZEME/wza7q3tn/4/

HTML

<div class=PgTwo></div>

JS

$.getJSON(url, function(data) {
    arr = data.data;

    for (var i = 0; i < arr.length; i++) {
        var articleInfo = arr[i];
        console.log(articleInfo);

        var imgURL = articleInfo["listingimage"]['url'];
        var title = articleInfo["title"];
        var desc = articleInfo["listingdescription"];

        if (imgURL != "") {

            var imgWrapperDiv = document.createElement('div');
            var imgDiv = document.createElement('div');
            var descDiv = document.createElement('div');

            imgDiv.id = 'imgDiv';
            imgWrapperDiv.id = 'imgWrapperDiv';
            descDiv.id = 'descDiv';

            descDiv.textContent = desc;
            var imgurlCSS = 'url("'+imgURL+'")';
            $(imgDiv).css({'background-image': imgurlCSS, 'background-repeat': 'no-repeat', 'background-size': 'cover'});

            $(imgDiv).append($('<a href="" id=link >'+ title +'</a>').css('text-decoration', 'none'));
            $('#imgWrapperDiv').append(imgDiv);
            $('#imgWrapperDiv').append(descDiv);
            $('.PgTwo').append(imgWrapperDiv);
        }
     }
 });

Answer 1

您只在 for 循环中使用了一个 id。所以你正在创建包装器 div，然后设置它的 id 但每次它都将它设置为与以前相同的 id。在 DOM 中只有一个包装 div 存在。