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

您可以按如下方式捕获追加函数中的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

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 Fiddle

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

3 个答案: