使用循環創建新div的JQuery

我試圖通過JQuery循環來增加一些HTML代碼與JSON文件中的數據。問題是，我似乎無法弄清楚如何將div寫入到下面的HTML中，而是循環將數據相互遞增，最後在屏幕上顯示數組中的最後一個對象。使用循環創建新div的JQuery

這裏是我的Javascript（tubing.js）：

$(document).ready(function() { 
crazyFun(); 
}); 

function crazyFun() { 
for (var i = 0; i < virtualGoods.length; i++) { 
     var alpha= $('div.container').clone(); 
     alpha.find('div.picture').attr('id', virtualGoods[i].picture); 
     alpha.find('h2').html(virtualGoods[i].header); 
     alpha.find('p').html(virtualGoods[i].text); 
     alpha.find('div.notification').attr('id', virtualGoods[i].notification); 
     $('div.container').append(alpha); 
    } 
} 
}

「集裝箱」是HTML DIV，我想我的網頁上重複使用填充JSON數據。

這裏是我的HTML：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>Hello World</title> 
     <link rel="stylesheet" type="text/css" href="iphone.css"/> 
     <script type="text/javascript" src="jquery.js"></script> 
     <script type="text/javascript" src="virtualgoods.js"></script> 
     <script type="text/javascript" src="tubing.js"></script> 
    </head> 
    <body> 
     <div id="mainhead"> 
      <h1> 
      Hello World 
      </h1> 
     </div> 
     <div id="repeater"> 
       <div class="container"> 
        <div class="picture"> 
        </div> 
        <div class="object"> 
         <div class="header"> 
          <h2></h2> 
         </div> 
         <div class="text"> 
          <p> 

          </p> 
         </div> 
        </div> 
        <div class="notification"> 
        </div> 
        <div class="neg"> 
        </div> 
       </div> 
     </div>  
    <div id="buffer"> 
    </div> 
    </body> 
</html>

來源

2010-07-20 Sachin

你可以顯示你的html代碼？ – 2010-07-20 04:51:37

你能澄清哪一個div被克隆了嗎？它被放置在哪裏...是被克隆並插入緩衝區容器的轉發容器？當我確切地知道什麼是繼續 – 2010-07-20 05:08:06

當然，Alastair。我需要克隆Container類div中的所有內容，並且需要在前一個（一個接一個）下面創建額外的Container div。緩衝區div僅僅是一個虛擬div ...我只是意識到我需要擺脫標籤中的Container類屬性我也試着實現你的代碼，當我運行HTML文件時，它減慢了我的計算機的速度。 – Sachin 2010-07-20 05:16:55

三樣東西在我跳出：

$('container')沒有與id="container"選擇您的DIV，它在尋找一個<container>元素。嘗試將其更改爲$('#container')。
您正在克隆容器（或者當您執行＃1時）爲alpha，但您沒有對其執行任何數據工作。嘗試做這種模式：alpha.find('div.picture').attr('id', virtualGoods[i].picture);。現在您正在編輯克隆的alpha div中的div。
您想使用.after()而不是追加。這會在container之後插入alpha，而不是在裏面。

希望這會有所幫助！

編輯：

好吧，你幾乎在那裏。只是幾個變化。

更改此行$('div.container').append(alpha);爲$('#repeater').append(alpha);。這意味着你將新克隆的div附加在另一個之後，而不是在裏面。
接下來的問題是，當你克隆時，你將最終得到一個div數組作爲你在類中選擇的alpha（.container）。你需要做的是給第一個唯一的ID，如id="template"，並選擇當你克隆或刪除克隆的div的類屬性（使用.removeClass()。

來源

2010-07-20 04:52:56

我還根據您在原始帖子中的建議更新了我的代碼。 – Sachin 2010-07-20 05:18:37

謝謝！有效。你能否更詳細地解釋爲什麼我需要分配容器一個唯一的ID？那部分我仍然模糊不清。 – Sachin 2010-07-20 05:58:04

有一個與id和類可能有助於處理的stackoverflow問題：http://stackoverflow.com/questions/970730/css-id-vs-class – pxl 2010-07-20 10:06:15

使用循環創建新div的JQuery

回答

相關問題