Javascript 循环不在每个容器中附加值

Question

这可能是一个如此简单的修复，但我认为我已经在这个问题上停留了很长时间。谁能抽出一双眼睛看看我哪里搞砸了？

我正在从 json 文件中提取数据，并尝试将正确的值附加到正确的容器中。现在它将所有值放在第一个 div 容器中。

var metaDataArray = resultSet.searchResult[i].metadatatoshow;

        for (var xx = 0; xx < metaDataArray.length; xx++) {
            var metaDataContainer = "<div id='itemMetaDataContainer_"+xx+"'>Meta Data:" + metaDataArray[xx].name + "-</div>"

            for (var xxx = 0; xxx < metaDataArray[xx].meta_values.length; xxx++) {

                $('#itemMetaDataContainer_'+xx).append(metaDataArray[xx].meta_values[xxx]);

            }

            itemDetailsDiv.append(metaDataContainer);
        }

Answer 1

您试图在将容器附加到详细信息 div 之前选择一个容器。尝试通过以下方式将数据值数组附加到您的容器:

var metaDataArray = resultSet.searchResult[i].metadatatoshow;

for (var xx = 0; xx < metaDataArray.length; xx++) {
    var metaDataContainer = $("<div id='itemMetaDataContainer_" + xx + "'>Meta Data:" + metaDataArray[xx].name + "-</div>");
    for (var xxx = 0; xxx < metaDataArray[xx].meta_values.length; xxx++) {
        metaDataContainer.append(metaDataArray[xx].meta_values[xxx]);
    }
    itemDetailsDiv.append(metaDataContainer);
}

更新:

一个 jQuery 对象在索引 [0] 中保存纯 html 元素(假设它不是数组)。
要从 metaDataContainer 中获取 html，您可以在 metaDataContainer[0]

中找到它

因此，为了将 jQuery 对象 metaDataContainer 附加到纯 html 元素 itemDetailsDiv，您需要执行以下操作:

itemDetailsDiv.innerHtml + = metaDataContainer[0];

更新 2:

这是一个普通的 JavaScript 解决方案:

var metaDataArray = resultSet.searchResult[i].metadatatoshow;

for (var xx = 0; xx < metaDataArray.length; xx++) {
    //initializing the html string with the container opening tag and the description:
    var metaDataContainer = "<div id='itemMetaDataContainer_" + xx + "'>Meta Data:" + metaDataArray[xx].name;

    //looping through the values and adding them to the html string:
    for (var xxx = 0; xxx < metaDataArray[xx].meta_values.length; xxx++) {
        //create a span for each value and add it to the html string
        metaDataContainer+="<span>" + metaDataArray[xx].meta_values[xxx] + "</span>";
        //add a line break just for aesthetics, you can change to suit your formatting requirements
        metaDataContainer+="<br/>";
    }
    //finish by adding a closing tag for the container
    metaDataContainer+="-</div>"

    //append the new html string to the details div
    itemDetailsDiv.innerHtml +=metaDataContainer;
}