Question

我正在尝试在for循环中的每个迭代中为每个图像及其描述创建一个容器div，但是JQuery将所有图像div和description 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。

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

1 个答案: