Проблема с использованием jQuery> селектор

Question

У меня есть что-то вроде следующего кода jQuery

buttons =
document.createElement('div');      
$(buttons).addClass("overlay_buttons").css({
           styles });

save =
document.createElement('input');
$(save).attr({  type: "button",
    value: "Save" 
}).css({width:'45%'});

undo =
document.createElement('input');
$(undo).attr({  type: "button",
    value: "Start again" 
}).css({width:'93%'});

//add elements to document
$(buttons).append(undo);
$(buttons).append(save); 
$(buttons +'> input').css({
       shared styles for buttons 
});

У меня проблема в том, что общие стили для кнопок не применяются. Я не получаю сообщений об ошибках. Я также пытался использовать другие методы jQuery, чтобы проверить, что проблема не в css, но ничего не применимо к $ (buttons + '> input').

Кто-нибудь знает, почему?

Answer 1

Ваша проблема здесь:

$(buttons +'> input').css({
   shared styles for buttons 
});

buttons в этот момент не строка, а объект DOM. Поэтому, когда вы пытаетесь добавить этот объект в строку > input, ваш селектор оказывается чем-то вроде «[object HTMLDivElement]> input», что, очевидно, неверно.

Этот должен работать, так как согласно документации children() он выбирает только непосредственных потомков, повторяя поведение селектора >:

$(buttons).children('input').css({
   shared styles for buttons 
});

Или, если это не так, что следует, тогда вы можете попробовать это, хотя я не чувствую себя хорошо по этому поводу:

$('> input', buttons).css({
   shared styles for buttons 
});

Кроме того, я не уверен, почему вы индивидуально создаете элементы с createElement. jQuery поддерживает создание элементов DOM на лету . Используя это, вы можете сократить это:

undo =
document.createElement('input');
$(undo).attr({  type: "button",
    value: "Start again" 
}).css({width:'93%'});

На это:

$('<input>').attr({  type: "button",
    value: "Start again" 
}).css({width:'93%'});