Why does jQuery not remove the class

Question

I'm running some jQuery to add/remove a current class. It works fine with the siblings, but not with the children of the siblings. Anybody got any good ideas?

$('#rotator_buttons td').click(function(){
    if($(this).hasClass('current')) {
        $(this).removeClass('current');
    }
    else {
        $(this).addClass('current').siblings().removeClass('current');
        $(this).siblings().children('a').removeClass('current');
        $(this).children('a').addClass('current');

    }
   return false;
});

HTML

<table id="rotator_buttons">
<tbody>
<tr>
  <td id="pause-play"><a href="#"><!-- --></a></td>
  <td><a href="#" id="1" target="_self" onclick="javascript:increment_slideshow(0)">Button 1</a></td>
  <td><a href="#" id="2" target="_self" onclick="javascript:increment_slideshow(0)">Button 2</a></td>
  <td><a href="#" id="3" target="_self" onclick="javascript:increment_slideshow(0)">Button 3</a></td>
  <td><a href="#" id="4" target="_self" onclick="javascript:increment_slideshow(0)">Button 4</a></td>
</tr>

Are they actually children, or are they nested deeper? It's nearly impossible to answer DOM selection questions when we can't see the DOM. — , Jan 31 '12 at 00:02
Depending on where the class `current` is used, you might just want to do `$(this).parent().find('.current').removeClass('current')`. — Felix Kling, Jan 31 '12 at 00:08

score 0 · Accepted Answer · answered Jan 31 '12 at 00:27

$('#rotator_buttons td').click(function(){
    if($(this).hasClass('current')) {
        $(this).removeClass('current');
    }
    else {
        $(this).children('a').addClass('current');
        $(this).siblings().each(function(){
            $(this).removeClass('current');
            $(this).children('a').removeClass('current');
        });
    }
    return false;
});

Why does jQuery not remove the class

1 Answers1