javascript - jquery addClass has no effect -

i have html:

<div class="container">     <div id="cell1" class="cell"><div class="content"></div></div>     <div id="cell2" class="cell"><div class="content"></div></div>     <div id="cell3" class="cell"><div class="content"></div></div> </div> 

css:

.container {     width: 300px;     height: 300px;     background-color: green; }  .cell {     background-color: red; }  #cell1 {     width: 70px;     height: 70px; }  #cell2 {     width: 70px;     height: 70px; }  #cell3 {     width: 70px;     height: 70px; }  .white {     background-color: white; }  .yellow {     background-color: yellow; }  .content {     width:40px;     height:40px;     background-color:blue; } 

javascript:

$(document).on('click', '.cell', function(e) {      $(this).parent().children().removeclass('white');     $(this).parent().children().children().removeclass('yellow');      $(this).addclass('white');     $(this).find('.content').addclass('yellow'); }); 

the problem having addclass('yellow') has no effect. however, if delete background-color in content class, works. thoughts why?

jsfiddle link: http://jsfiddle.net/rexwang/fwh6e/

thanks answers, works! don't using addclass , removeclass, posible use e.currenttarget.id achieve same goal?

it works .yellow background style overriden .content background style, since in stylesheet .content class goes after .yellow.

one way swap these classes in css.

demo: http://jsfiddle.net/fwh6e/2/