試圖在for循環中使用inner.HTML生成div-jquery

我正嘗試使用以下for循環來從JSON對象創建一個庫的縮略圖視圖。試圖在for循環中使用inner.HTML生成div-jquery

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一個div。 getElementByID

非常感謝您的任何指導。

來源

2016-03-24 Ely

爲什麼jQuery的標籤？ – j08691

@ j08691'$ .parseJSON（）' –

Dude ...你正在使用jQuery，你不妨使用它的Ajax幫手！ –

我在這裏丟失了些什麼，或者它不僅僅是創建一個以<div>開頭的新變量的情況，並且您在for循環中將內容連接到它，而不是直接連接到results.innerHTML？

您顯然會連接關閉<div>它，並將您的變量添加到results.innerHTML。

來源

2016-03-24 16:17:47

如果我正確理解你的問題，你不需要額外的循環。

如果你想在#results中包含整個事物，你可以在你的for循環之外打開和關閉div。根據您的意見，您還需要將想要寫入的內容保存到變量中，而不是連續設置innerHTML，否則瀏覽器將嘗試自動修復未封閉的HTML元素。最後一切都是散裝。

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

如果你想包裹是從您的JSON響應返回的每個對象，可以內做到這一點的循環，但之前和您的項目之後。

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

來源

2016-03-24 16:26:55 Jordan

這兩種解決方案都會導致如下情況：

，然後是results.innerHTML的其餘部分。使用results.innerHTML打開的div在下一個results.innerHTML被處理之前自己關閉。 – Ely

@Ely我做了一個更新來解決這個問題。 – Jordan

創建外層div（環以外） -

var outerDiv = document.createElement('div');

一些屬性/如果需要，它的風格設置 -

outerDiv.setAttribute('class', 'outerDiv'); 
outerDiv.style.backgroundColor = 'white';

設置的這一內部HTML格到你的4個其他divs（裏面的循環） -

outerDiv.innerHTML = // YOUR FIRST DIV 
outerDiv.innerHTML += // YOUR SECOND DIV 
// ... etc

追加該div，而不是4個其他 -

var results = document.getElementById("results"); 
    results.appendChild(outerDiv);

來源

2016-03-24 16:28:04 Lewis

這可能是解決方案之一，如果你想放置一個div元素中環內容：

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

來源

2016-03-24 16:53:42

試圖在for循環中使用inner.HTML生成div-jquery

回答

相關問題