将 jQuery 对象存储到一个数组中以备后用答案

【问题标题】：Store jQuery object into an Array for later use将 jQuery 对象存储到一个数组中以备后用
【发布时间】：2014-02-24 16:04:19
【问题描述】：

我试图创建一个脚本，该脚本基于我传递给它的 JSON 以及我需要的属性创建一些按钮，如下所示：

var opts = {};
opts.buttons = [{
    type: "button",
    klass: "btn-default",
    text: "No"
    }, {
    type: "button",
    klass: "btn-primary",
    text: "Yes"
}];

var arr = [];
var button = $("<button></button>");
_.each(opts.buttons, function (v, k) {
    button.prop("type", v.type)
        .prop("class", v.klass)
        .html(v.text);
    arr.push(button);
});

然后，对它们进行字符串化，如下所示：

var str = arr.join('');
$('#someEl').html(str);

但这并没有像我想象的那样工作。返回的是[object Object] [object Object]，而不是按钮标签。

我该怎么做？任何帮助都会非常好。

【问题讨论】：

是否有理由不立即将它们添加到 HTML 中？如果您可以即时添加它们，您可以稍微简化逻辑。 . .
jQuery appending an array of elements的可能重复

标签： javascript jquery arrays object

【解决方案1】：

试试这个：

opts.buttons = [{
    type: "button",
    klass: "btn-default",
    text: "No"
    }, {
    type: "button",
    klass: "btn-primary",
    text: "Yes"
}];

var arr = [];
_.each(opts.buttons, function (v, k) {
    var button = $("<button></button>");
    button.prop("type", v.type)
        .prop("class", v.klass)
        .html(v.text);
    arr.push(button);
});

后来……

_.each(arr, function (b) {
    $('#someEl').append(b);
});

注意 1：opts.buttons 不是 JSON，它是对象字面量。

注意 2：$('#someEl').html 设置 HTML 内容，即它的参数应该是字符串。您可以使用：

var arr = [];
_.each(opts.buttons, function (v, k) {
    var button = $("<button></button>");
    button.prop("type", v.type)
        .prop("class", v.klass)
        .html(v.text);
    arr.push(button[0].outerHTML);
});

var str = arr.join('');
$('#someEl').html(str);

如果你坚持使用它。

注 3：如果给定对象的 toString 方法为未覆盖它使用默认的toString 实现，它提供[object Object] 表示。

【讨论】：

【解决方案2】：

var buttonsCfg = [{
    type: "button",
    klass: "btn-default",
    text: "No"
    }, {
    type: "button",
    klass: "btn-primary",
    text: "Yes"
}];

//you can use map to efficiently create an array from another
var buttons = buttonsCfg.map(function (cfg) {
    return $('<button>')
        .addClass(cfg.klass)
        .text(cfg.text)
        .prop('type', cfg.type);
});

//you shouldn't work with HTML strings when you already have constructed DOM elements
$('#someEl').append(buttons);

【讨论】：