Nesting jquery's .append(), .each(), append() and keeping the first "this" reference
<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>
