嵌套jquery的.append(),. double(),append()并保留第一个“this”引用

时间:2011-05-10 02:46:46

标签: jquery

请考虑以下代码段:

            var ul = $(".list_b").find("li").remove().end();
        $.each(Sites, function (index, value) {
            ul.append(
                $("<li></li>")
                    .append(
                        $("<span></span>")
                            .addClass("img_b")
                            .css("background-image", "url(pin.png)")
                            .text(value.Name)
                    )
                    .append(
                        $("<div></div>")
                            .addClass("div_archives")
                            .each(value.Documents, function (index2, value2) {
                                this.append(
                                    $("<a></a>")
                                        .attr({ href: value.URL })
                                        .attr({ target: "_blank" })
                                        .html(value2.Name)
                                        .append(
                                            $("<img />")
                                                .attr({ src: "../img/icon_" + value2.Type + ".png" })
                                                .attr({ alt: "Archive " + value2.Tipo })
                                        )
                                )
                            }
                            )
                    )
            );
        });

这个json作为源对象。

[   {
  "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."
     }
  ]} ... ]

我试图实现的目标是将<a></a>块附加到父<div></div>块中,但我找不到引用外部“this”对象的方法。

我知道这一定是一个蹩脚的问题,但我没有任何线索所以每个想法都会受到欢迎。

提前致谢。


有条件的信息: this$(this)都不起作用,两种方式都抛出运行时异常(Object不支持此属性或方法)

2 个答案:

答案 0 :(得分:3)

在您需要的内容中,您将其分配给变量,因此它将在......之后可用。

说你有

$("myelement").click(function() {
       var elementtoneed = this;
       $("myotherelement").load('sample.html', function() {
             $(elementtoneed).hide();
       });
});

所以,这样你就可以保存“this”元素以供将来参考。

答案 1 :(得分:1)

问题的根源似乎是你滥用each功能。有两种风格:一种用于迭代匹配的元素集,另一种用于迭代类似数组的事物(我将其称为“实用程序”风格)。

根据您的使用情况,您有点劫持<div>元素以将其用于实用程序风格。它与调用$.each相同,其中this指的是迭代值。

我认为你的问题的正确解决方案是重新考虑整个结构,而不是试图在一个庞大的函数调用链中做所有事情。

或者更好的是,使用像jQuery模板这样的模板引擎。