JQuery append()

Question

为什么下面的代码只附加了我添加的第一个div，而不是所有的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

您的选择器中没有#。

我建议像在this example from the jQuery website中那样使用appendTo，而不是选择刚刚创建的元素。

$('<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

我认为你忽略了每个函数的功能。在创建阶段，没有理由像这样通过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);
 });