JQuery append()

Why the following code only appends the first div i add and not all of them? (i stripped some code for the sake of argument).

Any tips on how to dynamically construct some nested divs with jquery are welcome.

    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'开发者_如何学Python>" + value.Word + "</div>");
          divBox.append("<div style='position: relative; clear: both; padding: 5px'>" + value.Description + "</div>");

          i++;
 });

You don't have the # in your selector.

Instead of selecting an element you just created, I suggest using appendTo, like in this example from the jQuery website.

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

For you, that's:

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

You can use jquery's templating for this sort of thing.. and if the data is going to change (and you want the UI to update) then I would use http://knockoutjs.com

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

I think you're missing what each function does. There's no reason to index things by ID like this in the creation stage. I've made comments about what each line does.

I've also reordered things a bit to speed up execution, but that's more minor.

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

A different way is not using the DOM until the end, and keep adding to your newly created divs:

$.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++;
 });