Question

我有以下代码：

$('#test')
    .append($.map(this.items, function (item, index) {
        return '<li><input type="checkbox" value="' + item.key + '">' item.title + '</li>'
    }).join(''));

但我希望它看起来更像这样：

$('#test')
    .append($.map(this.items, function (item, index) {
        return $('<li/>').append('<input/>', {type: 'checkbox', value: item.key}).text(item.title)
    });

但这种剂量似乎有效。有人可以帮忙吗？

修改因为似乎答案不适用于RL情况（我让代码简短解释）这里是我的实际代码：

_RenderCheckbox: function () {
    $('<ul/>')
        .appendTo(this.element)
        .addClass('widget')
        .append($('<input>').attr({ type: 'text', class: 'field', 'data-map': this.element.attr("data-map") }))
        .append($.map(this.items, function (item, index) {
                return '<li><label><input type="checkbox" value="' + item.key + '">' + item.parent + item.title + '</label></li>'
        }).join(''));
},

这是我正在开发的jquery ui小部件的一部分。

Answer 1

.text()会替换<li>的内容。您必须append / prepend您的元素：

return $('<li />', {
    text: item.title
}).append($('<input />', {
    type: 'checkbox',
    value: item.key
}));

另外，请勿使用join()。只需将此代码放入$.each：

即可

var $test = $('#test');

$.each(this.items, function(item, index) {
    var $li = $('<li />', {
        text: item.title
    }).appendTo($test);

    $('<input />', {
        type: 'checkbox',
        value: item.key
    }).appendTo($li);
});

如果你喜欢巨大的单行：

var $test = $('#test');

$.each(this.items, function(item, index) {
    $('<li />', {
        text: item.title
    }).appendTo($test)
      .append($('<input />', {
        type: 'checkbox',
        value: item.key
    }));
});

Answer 2

您是否尝试过拼接以避免返回错误的对象？没有尝试过你的代码，这可能有用：

$('#test')
.append($.map(this.items, function (item, index) {
    var ret = $('<li/>');
    var input = ret.append('<input/>', {type: 'checkbox', value: item.key});
    input.text(item.title);
    return ret;
});

jQuery $ .map（）返回一个新元素

2 个答案: