title: Nesting jquery's .append(), .each(), append() and keeping the first "this" reference
body: <p>Please consider this code snippet:</p>
  
  <pre><code>            var ul = $(".list_b").find("li").remove().end();
          $.each(Sites, function (index, value) {
              ul.append(
                  $("&lt;li&gt;&lt;/li&gt;")
                      .append(
                          $("&lt;span&gt;&lt;/span&gt;")
                              .addClass("img_b")
                              .css("background-image", "url(pin.png)")
                              .text(value.Name)
                      )
                      .append(
                          $("&lt;div&gt;&lt;/div&gt;")
                              .addClass("div_archives")
                              .each(value.Documents, function (index2, value2) {
                                  this.append(
                                      $("&lt;a&gt;&lt;/a&gt;")
                                          .attr({ href: value.URL })
                                          .attr({ target: "_blank" })
                                          .html(value2.Name)
                                          .append(
                                              $("&lt;img /&gt;")
                                                  .attr({ src: "../img/icon_" + value2.Type + ".png" })
                                                  .attr({ alt: "Archive " + value2.Tipo })
                                          )
                                  )
                              }
                              )
                      )
              );
          });
  </code></pre>
  
  <p>And this json as the source object.</p>
  
  <pre><code>[   {
    "Id":1,
    "Name":"Rachel Weiss",
    "Color":"FF0000",
    "Symbol":"A",
    "Latitude":51.123123,
    "Longitude":12.131231,
    "Documents":[
       {
          "Id":1,
          "Name":"Document 1",
          "Ext":"pdf",
          "Type":"pdf",
          "URL":"http://www.google.com"
       },
       {
          "Id":2,
          "Name":"Document 2",
          "Ext":"doc",
          "Type":"word",
          "URL":"http://www.yahoo.com"
       },
       {
          "Id":3,
          "Name":"Document 3",
          "Ext":"xls",
          "Type":"excel",
          "URL":"http://www.amazon.com"
       }
    ],
    "Notes":[
       {
          "Id":0,
          "Texto":"test test"
       },
       {
          "Id":1,
          "Texto":"test test. test test"
       }
    ]},{
    "Id":2,
    "Name":"Natalie Portman",
    "Color":"00FF00",
    "Symbol":"B",
    "Latitude":51.123123,
    "Longitude":12.131231,
    "Documents":[
       {
          "Id":11,
          "Name":"Document 11",
          "Ext":"doc",
          "Type":"word",
          "URL":"http://www.google.com"
       }
    ],
    "Notes":[
       {
          "Id":10,
          "Texto":"test test. test test. test test."
       }
    ]} ... ]
  </code></pre>
  
  <p>The goal I'm tryin to achieve is to append the <code>&lt;a&gt;&lt;/a&gt;</code> block into the parent <code>&lt;div&gt;&lt;/div&gt;</code> block, but I can't find a way to reference the outer "this" object.</p>
  
  <p>I know this must be a lame question, but I don't have any clue so every idea will be very welcome. </p>
  
  <p>Thanks in advance.</p>
  
  <hr>
  
  <p>Aditional info:
  Neither <code>this</code> nor <code>$(this)</code> works, both ways throws a runtime exception (Object doesn't support this property or method)</p>