Question

是否有更优雅的方式来实现以下目标。我必须使用许多步骤生成html标记。多年来一直在搞乱它，但不能使用尽可能少的步骤来使标记工作。

function prependCheckbox (data) {

        if (!data.element) { return data.text; }

        var $result = $('<div class="checkbox no-margin"><label>');
        var $checkbox = $('<input type="checkbox" />');
        $result.append($checkbox);
        $checkbox.prop('checked', data.element.selected);
        $result.append(data.text + '</label></div>');

        return $result;
    };

Answer 1

你做的是不正确的：jQuery只能构建完整的元素，而不是半元素。因此var $result = $('<div class="checkbox no-margin"><label>');正在添加一个空（已关闭）标签，而$result.append(data.text + '</label></div>');只是无效。

如果你试图将复选框放在标签内，使用jQuery链接调用的功能，你可以这样做：

function prependCheckbox (data) {
    if (!data.element) { return data.text; }
    return $('<div class="checkbox no-margin">').append(
        $('<label>').append(
            $('<input type="checkbox" />').prop('checked', data.element.selected)
        ).append(data.text)
    );
}

Answer 2

我喜欢可读性和一致性

function prependCheckbox(data) {
    if (!data.element) {
        return data.text;
    }

    var $result   = $('<div />', {
        'class' : 'checkbox no-margin'
    }),
        $label    = $('<label />', {
            text : data.text
    }),
        $checkbox = $('<input />', {
            type    : 'checkbox',
            checked : data.element.selected
    });

    return $result.append( 
        $label.prepend( $checkbox )
    );
}

FIDDLE

Jquery html追加前置一行

2 个答案: