문제> 선택

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 요소 생성을 지원합니다 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%'});