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); 
});