1

我有以下代码：

$('#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 小部件的一部分。

4

2 回答 2

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
    }));
});
于 2013-01-11T17:36:12.577 回答
0

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

$('#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;
});
于 2013-01-11T17:37:26.450 回答