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

我认为你错过了每个功能的功能。在创建阶段，没有理由按照这样的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);
 });

Answer 4

另一种方法是在结束之前不使用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++;
 });

JQuery append（）

4 个答案: