jQuery를 사용하여 div에서 배경색을 어떻게 바꿀 수 있습니까?

Question

div 안에 대체 배경색이 필요합니다. 이 코드를 통해 내가 수행 한 작업은 다음과 같습니다.

첫 번째 행에 bgcolor가 있고 다음 행에는 대체 색이 있어야합니다.

시도했지만 작동하지 않았습니다.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".rowBg div:odd").addClass("altBg"); 
    }); 
</script> 

/*CSS*/ 
div.rowBg div { clear:both; padding:0; overflow:hidden } 
div.altBg { background-color:#eee !important; overflow:hidden; padding:5px 0 } 
<!--HTML--> 
<div class="rowBg"> 
      <div> 
      <!--Row1--> 
      <span class="alphabets">A</span> 
      <span class="itemNames"> 
      <ul> 
      <li><a href="../locate/refine.html?N=4294963558">Acer America</a></li> 
      <li><a href="../promotions/index.html?page_id=3703">Acronis</a></li> 
      <li><a href="../locate/refine.html?N=4294966145">Adaptec</a></li> 
      <li><a href="../promotions/index.html?page_id=3163">Adobe</a></li> 
      <li><a href="../promotions/index.html?page_id=4402">AirWatch</a></li> 
      </ul>   
      </span> 
      </div> 
      <!--Row 2--> 
      <div> 
      <!--Row1--> 
      <span class="alphabets">A</span> 
      <span class="itemNames"> 
      <ul> 
      <li><a href="../locate/refine.html?N=4294963558">Acer America</a></li> 
      <li><a href="../promotions/index.html?page_id=3703">Acronis</a></li> 
      <li><a href="../locate/refine.html?N=4294966145">Adaptec</a></li> 
      <li><a href="../promotions/index.html?page_id=3163">Adobe</a></li> 
      <li><a href="../promotions/index.html?page_id=4402">AirWatch</a></li> 

      </ul>   
      </span> 
      </div> 

      </div> 

감사합니다, 나는 당신이 게시 한 HTML/jQuery를 테스트 한 당신이 기대하는 일을한다

Answer 1

: 여기에 코드입니다. 각 홀수 Div에는 altBG 클래스가 있습니다.

내가 제안하는 것은 귀하의 CSS가 잘못되었지만 아직 게시되지 않았으므로 그 사실을 확인할 수 없습니다. 당신이에서 JQuery와의이 라인을 변경하는 경우 :

$(".rowBg div:odd").addClass("altBg"); 

$(".rowBg div:odd").css({"background-color":"#ff0000"}) 

에 당신은 당신의 마크 업 및 JQuery와 확인 것을 볼 수 있어야합니다.

희망이 도움이됩니다.

Answer 2

jquery 라이브러리를 추가 했습니까? HTML, CSS 및 jQuery 코드는 정상이지만 라이브러리를 추가해야하므로 코드가 정상적으로 작동합니다. 당신은 아마 CSS 여기 jQuery

<style type="text/css"> 
div.rowBg div { clear:both; padding:0; overflow:hidden } 
div.altBg { background-color:#eee !important; overflow:hidden; padding:5px 0 } 
</style> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".rowBg div:odd").addClass("altBg"); 
    }); 
</script> 

<div class="rowBg"> 
      <div> 
      <!--Row1--> 
      <span class="alphabets">A</span> 
      <span class="itemNames"> 
      <ul> 
      <li><a href="../locate/refine.html?N=4294963558">Acer America</a></li> 
      <li><a href="../promotions/index.html?page_id=3703">Acronis</a></li> 
      <li><a href="../locate/refine.html?N=4294966145">Adaptec</a></li> 
      <li><a href="../promotions/index.html?page_id=3163">Adobe</a></li> 
      <li><a href="../promotions/index.html?page_id=4402">AirWatch</a></li> 
      </ul>   
      </span> 
      </div> 
      <!--Row 2--> 
      <div> 
      <!--Row1--> 
      <span class="alphabets">A</span> 
      <span class="itemNames"> 
      <ul> 
      <li><a href="../locate/refine.html?N=4294963558">Acer America</a></li> 
      <li><a href="../promotions/index.html?page_id=3703">Acronis</a></li> 
      <li><a href="../locate/refine.html?N=4294966145">Adaptec</a></li> 
      <li><a href="../promotions/index.html?page_id=3163">Adobe</a></li> 
      <li><a href="../promotions/index.html?page_id=4402">AirWatch</a></li> 

      </ul>   
      </span> 
      </div> 
<div> 
      <!--Row1--> 
      <span class="alphabets">A</span> 
      <span class="itemNames"> 
      <ul> 
      <li><a href="../locate/refine.html?N=4294963558">Acer America</a></li> 
      <li><a href="../promotions/index.html?page_id=3703">Acronis</a></li> 
      <li><a href="../locate/refine.html?N=4294966145">Adaptec</a></li> 
      <li><a href="../promotions/index.html?page_id=3163">Adobe</a></li> 
      <li><a href="../promotions/index.html?page_id=4402">AirWatch</a></li> 
      </ul>   
      </span> 
      </div> 
<div> 
      <!--Row1--> 
      <span class="alphabets">A</span> 
      <span class="itemNames"> 
      <ul> 
      <li><a href="../locate/refine.html?N=4294963558">Acer America</a></li> 
      <li><a href="../promotions/index.html?page_id=3703">Acronis</a></li> 
      <li><a href="../locate/refine.html?N=4294966145">Adaptec</a></li> 
      <li><a href="../promotions/index.html?page_id=3163">Adobe</a></li> 
      <li><a href="../promotions/index.html?page_id=4402">AirWatch</a></li> 
      </ul>   
      </span> 
      </div> 
<div> 
      <!--Row1--> 
      <span class="alphabets">A</span> 
      <span class="itemNames"> 
      <ul> 
      <li><a href="../locate/refine.html?N=4294963558">Acer America</a></li> 
      <li><a href="../promotions/index.html?page_id=3703">Acronis</a></li> 
      <li><a href="../locate/refine.html?N=4294966145">Adaptec</a></li> 
      <li><a href="../promotions/index.html?page_id=3163">Adobe</a></li> 
      <li><a href="../promotions/index.html?page_id=4402">AirWatch</a></li> 
      </ul>   
      </span> 
      </div> 

      </div>