jQuery를 사용하여 찾기

Question

"#change_color"에서 '.preview-inner'의 배경색을 노란색으로 변경할 수 있습니까?

<div id = "form-container> 
    <input class="color-picker" id="change_color" type="text"> 
    <div class="replacer"> 
    <div class="preview"> 
     <div class="preview-inner" style="background-color: white"> 

나는 이것을 시도 :

$('#change_color').find('.preview-inner').css('background-color', 'yellow') 

하지만이 작동하지 않을 수있다.

참고 : 나는 '.replacer'

모든 아이디어의 참 부모로 #change_color을 마련 할 수 있으므로 플러그인을 사용하고 있는가?

Answer 1

문제를 해결하려면 부모를 선택하고 찾기를 사용해야합니다. 지금 당신은 아이들이없는 요소를 선택하고 작동하지 않는 특정한 아이를 찾고 있습니다.

$('.replacer').find('.preview-inner').css('background-color', 'yellow') 

을 또는 당신이 시도 할 수 있습니다 :

이 시도

$('#form-container').find('.preview-inner').css('background-color', 'yellow') 

jQuery를 사용하면 선택한 요소의 자식에 대한 모습을 찾을 수 있습니다. 나는이 예를 보여주기 위해 바이올린을 만들었다.

http://jsfiddle.net/g2295Lah/

당신은 당신의 코드를로드하는 경우 당신은 당신의 HTML 전에 jQuery를 문서 준비 기능을 가지고 있는지 확인 할 수 있습니다.

Answer 2

그것은 당신이 단지 차원과 내용 당신이 그것을 볼 수없는 빈 사업부를 정의하는 경우 때문에, 색상이 변경 볼 수 있도록 내가 사업부의 폭과 높이를 지정

<div id = "form-container"> 
    <input class="color-picker" id="change_color" type="text"> 
    <div class="replacer"> 
    <div class="preview"> 
     <div class="preview-inner" style="background-color: white; height: 50px; width: 200px;"> 
     </div> 
    </div> 
    </div> 
</div> 
</body> 
<script> 
jQuery(document).ready(function(){ 
jQuery('#change_color').parent().find('.preview-inner').css('background-color', 'yellow'); 
}); 
</script> 

가능합니다.

http://jsfiddle.net/L16kpksz/

Answer 3

입력은 중첩 된 div에 진정한 부모가 될하지 않을 것입니다. 당신은 단지 을 보통 셀렉터 $('.preview-inner').css('background-color', 'yellow')으로 선택해야합니다. 만약 당신이 farbtastic을 사용한다면 당신은 그것이 작동하는 방법에 대한 이해를 얻지 못하기 때문에 그들의 데모를 볼 것을 제안 할 것입니다. http://acko.net/blog/farbtastic-jquery-color-picker-plug-in/