javascript - 尝试在 for 循环 jquery 中使用 inner.HTML 生成一个 div

Question

我正在尝试使用以下 for 循环从 JSON 对象创建画廊的缩略图 View 。

function GalleryContent(url){

    var hr = new XMLHttpRequest();
    var results= document.getElementById("results");
    hr.open("POST",url);    
    hr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    hr.onreadystatechange = function() {
        if(hr.readyState == 4 && hr.status == 200) {
            var data= $.parseJSON(hr.responseText);
            var results = document.getElementById("results");
            results.innerHTML = "";
            for (var obj in data){
                 results.innerHTML += "<div class='artwork'><img src='"+data[obj].filePath+data[obj].fileName+ "' alt='"+data[obj].Num+data[obj].title+"' width='150' height='auto'></div>";
                results.innerHTML += "<div class='Num'>Num:"+data[obj].Num+ "</div>";
                 results.innerHTML += "<div class='Title'>Title:"+data[obj].title+ "</div>";
                results.innerHTML += "<div class='Price'>Price:<span class='numbers'>"+data[obj].Price+ "</span></div>";
            }
        }
    }

这很好用，但我发现我添加的任何 div 仅适用于当前附加内容，我需要的是将这 4 个结果包含在一个 div 中，这样我就可以处理内容并设置显示样式进入页面后。

我读过这个:Trying to make a jquery 'for' loop that adds div elements inside another div.

我的新问题是在哪里以及如何添加第二个循环，该循环仅将一组信息放入一个 div 中，然后可以将其附加到我的 .getElementByID 中的结果 div

提前感谢您的指导。

Answer 1

如果我正确理解你的问题，你不需要额外的循环。

如果您想将整个内容包含在#results 中，您可以在for 循环外打开和关闭div。根据您的意见，您还需要将要写入的内容保存到变量中，而不是不断设置 innerHTML，否则浏览器将尝试自动修复未关闭的 HTML 元素。最后批量完成。

content = "";
content += "<div id='container'>";
for (var obj in data) {
    ...
}
content += "</div>";
results.innerHTML = content;

如果您想封装从您的 JSON 响应返回的每个对象，您可以在 for 循环中但在您的元素之前和之后进行。

content = "";
for (var obj in data) {
    content += "<div class='gallery-container'>";
    ...
    content += "</div>";
}
content += "</div>";
results.innerHTML = content;