Javascript 为什么不是'；JQuery在每次迭代中创建一个新的div？

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

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

以下是JSFIDLE：

HTML

JS

$.getJSON（url、函数（数据）{
arr=data.data；
对于（变量i=0；i

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

是的，但是我对imgDiv和descDiv也做了同样的事情，但是它们并没有全部合并到一个div中。它们是在单独的div中创建的，所以为什么会有区别呢？div的创建与id无关，但是当您尝试通过id附加到元素时，它会根据它找到的元素来工作。如果你想对那些孩子做些什么，你也会有问题的。作为测试，请尝试将for循环计数器附加到ids imgDiv.id='imgDiv_'+i；imgWrapperDiv.id='imgWrapperDiv_u'+i；descDiv.id='descDiv_u'+i；看看它是干什么的我知道了！写入imgWrapperDiv.appendChild（imgDiv）而不是$（“#imgWrapperDiv”）.append（imgDiv）修复了它。

<div class=PgTwo></div>

$.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);
        }
     }
 });