Question

我正在尝试使用一些动态html内容在for循环中添加for循环。但它无法正常工作。谁能建议我如何在for循环中正确添加动态html内容

我尝试删除+号，但是它不起作用

for (i = 0; i <= NOofFeature - 1; i++) {

        var amenities = results[i].amenities.map(amenity => amenitiesUiMap[amenity]);

        featureitem += '<div class="item">'+
        '<div class="imgTitle">'+
        '<a><img src="http://192.168.1.211:3000/facility' + results[i].images[0].url + '"  height="150px" alt="" /></a>'+
        '</div>'+
        '<p style="font-weight:500;font-size:16px;">' + results[i].name + '</p>'+

         for (amenityIndex in amenities) {

            featureitem += '<span style="font-size:12px;padding:5px;">' + amenities[amenityIndex].img + ' ' + amenities[amenityIndex].name + '</span>'+

        }
        '</div>';

    };

    $(".Featureprop").html(featureitem);

将获取所有数据并一一打印<div class="item"> ....</div>

<div class="item">
<div class="imgTitle"><a><img src="http://192.168.1.211:3000/facility/image/5d1c7ae723da621f20710c2a_441292467724100.png" height="150px" alt=""></a></div>
<p style="font-weight:500;font-size:16px;">Bhagini Suites</p>
<span style="font-size:12px;padding:5px;"><i class="fas fa-couch"></i> Air Conditioning</span>
<span style="font-size:12px;padding:5px;"><i class="fa fa-plane" aria-hidden="true"></i> Airport Transfer</span>
<span style="font-size:12px;padding:5px;"><i class="fa fa-car" aria-hidden="true"></i> Car Park</span>
<span style="font-size:12px;padding:5px;"><i class="fa fa-coffee" aria-hidden="true"></i> Coffee Maker</span>
<span style="font-size:12px;padding:5px;"><i class="fas fa-dumbbell"></i> Gym</span>
<span style="font-size:12px;padding:5px;"><i class="fas fa-swimming-pool"></i> Private Pool</span>
</div>

Answer 1

您需要构建一个字符串并将其连接到外部字符串中。

以下几点可以为您提供帮助：

Map可以使用单个表达式而不是使用块来遍历数组
模板字符串使您可以内联对象查找，以使代码更简洁

尝试将内部for循环替换为：

amenities.map(amenity => `<span style="font-size:12px;padding:5px;">${amenity.img} ${amenity.name}</span>`).join('')

在jQuery html方法内添加for循环

1 个答案: