problème en utilisant jQuery> Sélecteur

Question

J'ai quelque chose comme le code jQuery suivant

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 
}); 

Le problème que j'ai est que les styles partagés pour les boutons ne sont pas applicables. Je n'obtiens aucun message d'erreur. J'ai aussi essayé d'utiliser d'autres méthodes jQuery pour vérifier que ce n'est pas le css qui est le problème, mais rien de ce qui est appliqué à $ (buttons + '> input') ne marche.

Quelqu'un a-t-il une idée de pourquoi?

Answer 1

Votre problème est ici:

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

buttons à ce moment-là n'est pas une chaîne, mais un objet élément DOM. Ainsi, lorsque vous essayez d'ajouter cet objet à la chaîne > input votre sélecteur finit par être quelque chose comme "[object HTMLDivElement]> input", ce qui n'est évidemment pas correct.

Ce devrait travail, conformément à la documentation children() sélectionne uniquement les enfants immédiats, reproduisant le comportement du sélecteur >:

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

Ou, si cela ne veut pas, qu'il devrait, alors vous pouvez essayer cela, bien que je ne me sens pas bien à ce sujet:

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

aussi, je ne sais pas pourquoi vous créez individuellement les éléments avec createElement. jQuery prend en charge la création d'éléments DOM on the fly. En utilisant, vous pouvez raccourcir ce:

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

à ceci:

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