javascript - jQueryを使用して子DIVのクラスを変更するにはどうすればよいですか？

Question

私は次のものを持っています：

<li>
   <a id="show">
      <div class="sprite-blank" ></div></a></li>

jQueryを使用してこれを次のように変更するにはどうすればよいですか？

<li>
   <a id="show">
      <div class="sprite-balloon" ></div></a></li>

Answer 1

$('li a#show div').removeClass('sprite-blank').addClass('sprite-balloon');

また、使用することができますtoogleClass()：

$('li a#show div').toggleClass('sprite-blank sprite-balloon');

Answer 2

$('.sprite-blank').toggleClass('sprite-blank sprite-balloon');

これにより、ページで使用可能なすべて.sprite-blankの要素が変更されます。より具体的にする必要がある場合は、次のように最初のセレクターを変更するだけです。

$('a > .sprite-blank').toggleClass('sprite-blank sprite-balloon');

Answer 3

単に行う：

$(".sprite-blank").removeClass("sprite-blank").addClass("sprite-balloon");

Answer 4

私はあなたがそのようなものが必要だと思います：

http://jsfiddle.net/yUaZe/

HTML

<li>
   <a class="show" href="#">Show
     <div class="sprite sprite-hide" >Test</div>
    </a>
</li>
<li>
   <a class="show" href="#">Show
     <div class="sprite sprite-hide" >Ha</div>
    </a>
</li>

CSS

.sprite-balloon {
    display:block;
}
.sprite-hide {
 display:none;   
}
​

JS

$('.show').click(
    function(event) {
    var that=$(this);
    event.preventDefault();
    that.find('.sprite').toggleClass('sprite-balloon');
    that.find('.sprite').toggleClass('sprite-hide');
    console.log(that);
    }
    );​