时间戳

首页 > 解决方案 > 在 jQuery html 方法中添加一个 for 循环

javascript - 在 jQuery html 方法中添加一个 for 循环

问题描述

我正在尝试在 for 循环中添加一些动态 html 内容的 for 循环。但它不能正常工作。谁能建议我如何在 for-loop 中正确添加动态 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>

标签： javascriptjqueryhtmlfor-loopdynamic

解决方案

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

这里有几件事可以帮助你：

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

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

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

推荐阅读