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，认为这是正确的路径，但它绑定(bind)到全局对象。显然不是我想要的。

Answer 1

您可以在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 + ' ');
            });                  
        })

Fiddle