Javascript变量作用域和链接函数调用

Question

给定以下Javascript（假设jquery 2.1.1）

var Bar = [
  {
    name: "Bob",
    id: "bb1019",
    roles: [
      "admin", "user"
    ]
  },
  {
    name: "Sally",
    id: "sa0378",
    roles: [
      "user"
    ]
  }
]

$(document).ready(function () {
  Bar.forEach(function (element, idx, array) {
    $("#foo").append($("<div>")
      .attr("class", "userBox")
      .append("Name: " + element.name + ", ID: " + element.id)
      .append($("<div>") // want to create jquery object on this div
        .attr("class", "rolesBox")
        .append(function () {
          element.roles.forEach(function (element, idx, array) {
            // How to create jquery object on closest div here
          }); 
        })
      )
    )
  });
}); 

我不知道对于我来说还是太晚了，但是我不知道如何创建一个包装我想要的DOM元素的jQuery对象。 我已在要创建jQuery的位置以及要包装的元素上发表了评论。

我想this想这是正确的道路，但它绑定到全局对象。 显然不是我想要的。

Answer 1

要在javascript范围之外（包括jQuery）使用任何对象，都需要对其进行引用，如果将代码全部内联，则在其他任何地方都没有引用。

例如，您可以创建您的零部件，然后附加它们。

$(document).ready(function () {
    Bar.forEach(function (element, idx, array) {
        // Components
        var $user = $("<div />", { "class" : "userBox" }).append(
                "Name: " + element.name + ", ID: " + element.id
            ),

            $box = $("<div />", { "class" : "rolesBox" });

        // Stitch it together and append to DOM 
        $("#foo").append(
            $user.append(
                $box.append(function () {
                    element.roles.forEach(function (element, idx, array) {
                        // $box and $user variables available for you here
                    }); 
                })
            )
        );
    });
});

Answer 2

您可以按如下所示在append函数中捕获div：

.append($("<div>") // want to create jquery object on this div
        .attr("class", "rolesBox")
        .append(function () {
            var $div = $(this);

            element.roles.forEach(function (element, idx, array) {
                $div.append(element + ' ');
            });                  
        })

小提琴

Answer 3

尝试var $divelement = $('<div>')

$(document).ready(function () {
    Bar.forEach(function (element, idx, array) {
        var $divElement = $("<div>", {
            "class": "rolesBox"
        });
        $("#foo").append($("<div>")
            .attr("class", "userBox")
            .append("Name: " + element.name + ", ID: " + element.id)
            .append($divElement
            .append(function () {
            element.roles.forEach(function (element, idx, array) {
                // How to create jquery object on closest div here
                $divElement.append('<div>' + element + '</div>')
            });
        })));
    });
});

JS小提琴