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

Question

Given the following Javascript (assume 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
          }); 
        })
      )
    )
  });
}); 

I don't know if it's just too late in the evening for me or what, but I can't figure out how to create a jQuery object wrapping the DOM element I want. I've commented where I want to create the jQuery and the element I want to wrap.

I tried this thinking this was the right path but it's bound to the global object. Clearly not what I want.

Answer 1

To work with any object in javascript out of its scope (jQuery included) you need to have a reference to it, if you put the code all inline you have no reference to it anywhere else.

For example, you can create your component parts and then append them.

$(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

You can capture the div inside the append function as follows:

.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

Answer 3

Try 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 Fiddle