首页 > 解决方案 > 使用 foreach 附加一个孩子

问题描述

假设我有一个回应

在此处输入图像描述

我通过数组循环

    response.data.aTweets.forEach(element => {
        //console.log(element);
        element.pics.forEach(pic => {
            var image = new Image();
            image.height = 180;
            image.classList.add('mt-2','rounded','mr-2', 'w-100');
            image.src    = pic;
            oHome.oImageRow1.appendChild(image); //append to image row one if length is <= 2
            oHome.oImageRow2.appendChild(image); //append to image row one if length is > 2
        });
        oHome.oTweetContainer.appendChild(oHome.oClone);
    });

这是我的 oImageRow1 和 oImageRow2

<div class="row" id="image_row_one">

</div>

<div class="row" id="image_row_two">

</div>

如果 element.pics 的长度大于 2,我如何附加到图像第一行

我尝试使用 element.pics.length 但它是恒定的。我想我可能需要一个柜台什么的

标签: javascriptarrays

解决方案


这应该有效。

 response.data.aTweets.forEach(element => {
        //console.log(element);
        element.pics.forEach(pic => {
            var image = new Image();
            image.height = 180;
            image.classList.add('mt-2','rounded','mr-2', 'w-100');
            image.src = pic;
            
            element.pics.length > 2 ? oHome.oImageRow2.appendChild(image) : oHome.oImageRow1.appendChild(image);
        });
        oHome.oTweetContainer.appendChild(oHome.oClone);
    });


推荐阅读