JQuery append（）

Question

爲什麼下面的代碼只追加我添加的第一個div而不是全部？ （爲了爭辯，我剝去了一些代碼）。

有關如何動態構建一些jQuery的嵌套div的任何提示，歡迎。

var divRow; 
    var nRow = 0; 
    var i = 0; 

    $.each(data, function (key, value) {   
      nRow++; 
      div.append("<div id='divRow" + nRow + "' style='position: relative; float: left; '></div>"); 
      divRow = $('divRow' + nRow); 

      divRow.append("<div id='divBox" + i + "' style=position: relative; clear: both; padding: 5px'></div>"); 

      var divBox = $('divBox' + i); 

      divBox.append("<div style='position: relative; clear: both; padding: 5px'>" + value.Word + "</div>"); 
      divBox.append("<div style='position: relative; clear: both; padding: 5px'>" + value.Description + "</div>"); 

      i++; 
}); 

Answer 1

您的選擇器中沒有#。

而不是選擇剛剛創建的元素，我建議使用appendTo，就像在this example from the jQuery website中一樣。

$('<p id="test">My <em>new</em> text</p>').appendTo('body'); 

對你來說，這就是：

var divRow; 
    var nRow = 0; 
    var i = 0; 

    $.each(data, function (key, value) {   
      nRow++; 
      div.append(); 
      var divRow = $("<div id='divRow" + nRow + "' style='position: relative; float: left; '></div>").appendTo(div); 

      var divBox = $("<div id='divBox" + i + "' style=position: relative; clear: both; padding: 5px'></div>").appendTo(divRow); 

      divBox.append("<div style='position: relative; clear: both; padding: 5px'>" + value.Word + "</div>"); 
      divBox.append("<div style='position: relative; clear: both; padding: 5px'>" + value.Description + "</div>"); 

      i++; 
}); 

Answer 2

您可以使用jquery's templating對於這樣的事情..和數據是否會改變（你想要的UI更新），那麼我會使用http://knockoutjs.com

見http://knockoutjs.com/examples/templating.html

Answer 3

以不同的方式不使用DOM才結束，並不斷加入到新創建的div：

$.each(data, function (key, value) {   
     nRow++; 
     var row = $("<div id='divRow" + nRow + "' style='position: relative; float: left; '>"); 
     var box = $("<div id='divBox" + i + "' style=position: relative; clear: both; padding: 5px'></div>"); 
     box.append("<div style='position: relative; clear: both; padding: 5px'>" + value.Word + "</div>"); 
     box.append("<div style='position: relative; clear: both; padding: 5px'>" + value.Description + "</div>"); 
     row.append(box); 
     div.append(row); 
     i++; 
}); 

Answer 4

我想你錯過了每個功能的功能。沒有理由在創建階段通過這樣的ID來索引事物。我已經對每條線做了什麼評論。

爲了加速執行，我也重新排列了一些東西，但這樣做更小。

$.each(data, function (key, value) {   
    // First create your row node. Similar to document.createElement. 
    var pRow = $("<div id='divRow"+key+"' style='position: relative; float: left; '></div>"); 
    // Then create your child node. 
    var pBox = $("<div id='divBox"+key+"'style=position: relative; clear: both; padding: 5px'></div>"); 

    // Create your information nodes as children of your box node.   
    pBox.append("<div style='position: relative; clear: both; padding: 5px'>" + value.Word + "</div>"); 
    pBox.append("<div style='position: relative; clear: both; padding: 5px'>" + value.Description + "</div>"); 

    // Add your box node to the row. Similar to .appendChild. 
    pRow.append(pBox); 
    // Add your row to the active DOM. 
    div.append(pRow); 
});