如何使用javascript jquery（复制）

Question

嗨，大家好我在嵌套数组中显示图像时遇到了麻烦，因为它在一个div容器中显示所有图像而不是1 div 1图像 我现在不知道该怎么办？ 我很抱歉我的英语不好这里是我的代码

更新 我已经包含了地图标记的div和结果的容器，其中与标记相对应的产品将显示在搜索容器上

HTML

//For Marker
<div class='e-mapMarker'></div>

//For Search Result Container

<div id='search-result'>
</div>

的Javascript

function displayData(e)
{
var html = '';
var html2 = '';
var mapDiv = document.getElementById('mapContainer'), i = 0,
    dataIndex, tooltipDiv, key, item,
    mapMarkers = $(mapDiv).find('.e-mapMarker'), index = 0;
var collection = [];
collection = collection.concat(flsSites, flsInstallation, flsProduct);

var sites = $('#fls_site').attr('data-flag');
var installation = $('#fls_installation').attr('data-flag');
var product = $('#fls_products').attr('data-flag');

for (i = 0; i < mapMarkers.length; i++) {

    if (e.target.parentNode.parentNode == mapMarkers[i]) {
        index = i;
    }

}

html += '<div id="infocontainer" class="map_element">';
html += "<div class='p-image'><img src='src/images/" + collection[index].company_logo + "' /></div>";
html += '<div class="popupdetail">';
html += '<div class="p-name"> Site Name: ' + collection[index].site_name + '</div>';
html += '<div class="p-name"> Site Status: ' + collection[index].status + '</div>';
html += '<div class="p-name"> Country: ' + collection[index].country_name + '</div>';
html += '</div>';
html += '</div>';

html2 += '<div class="rightcontainer">';
html2 += collection[index].products.map(product => "<div class='p-name'><img src='src/images/" + product.image + "' /><br></div>");
html2 += '<div id="imagedetail">';
html2 += '<span class="details">' + collection[index].products[0].pump +'</span>';
html2 += '</div>';
html2 += '</div>';
if (!document.getElementById('map_tooltip'))
{
    tooltipdiv = $("<div></div>").attr('id', "map_tooltip");
    $(document.body).append(tooltipdiv);
    $(tooltipdiv).css({
        "display": "none", "padding": "5px",
        "position": "absolute",
        "z-index": "13000",
        "cursor": "default",
        "font-family": "Segoe UI",
        "color": "#707070",
        "font-size": "12px", "pointer-events": "none",
        "background-color": "#FFFFFF",
        "border": "1px solid #707070"
    });
}
else
{
    tooltipdiv = $("#map_tooltip");
    $(tooltipdiv).css({
        "left": (e.pageX + 5),
        "top": (e.pageY + 5)
    });
    $(tooltipdiv).html(html).show("slow");
    $('#search-result').append(html2);
}

}

这就是我得到的

Answer 1

你创建并将你的div添加到for循环之外，这意味着它只会被执行一次。将代码移动到循环内。