問題使用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，但沒有應用於$（按鈕+'>輸入'）的作品。

有沒有人有任何想法爲什麼？

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元素on the fly。利用這一點，您可以縮短這個：

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

要這樣：

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