Jquery add and remove class to a div placed inside a li

Question

i wanna add and remove class to a div placed inside a li, and when i click another li ineed to remove rightshapeactive class from the activated div

<ul id="servicesleft">
    <li class="left1">              
        <span>Lorem ipsum</span>
        <div id="rightshape" class="t"></div>
    </li>   

    <li class="left1">              
        <span>Lorem ipsum</span>
        <div id="rightshape" class="t"></div>
    </li>   

    <li class="left1">              
        <span>Lorem ipsum</span>
        <div id="rightshape" class="t"></div>
    </li>
</ul>

jQuery(document).ready(function() {
    $('#servicesleft').delegate('li', 'click', function() {
        $(this).find('#rightshape').addClass('rightshapeactive').siblings().removeClass('rightshapeactive');
    });
});

Answer 1

This should work. After .find('#rightshape'), the selection is referring to the div, and not the li. .end returns you to the previous selection.

jQuery(document).ready(function() {
  $('#servicesleft').delegate('li', 'click', function() {
    $(this).find('#rightshape')
      .addClass('rightshapeactive')
      .end()
      .siblings()
      .find('#rightshape')
      .removeClass('rightshapeactive');
  });
});

This might be even better:

jQuery(document).ready(function() {
  $('#servicesleft').delegate('li', 'click', function() {
    $('.rightshapeactive').removeClass('rightshapeactive');
    $('#rightshape', this).addClass('rightshapeactive');
  });
});

Answer 2

Using the class "t" instead: http://jsfiddle.net/m27ra/

jQuery(document).ready(function() {
    $('#servicesleft').delegate('li', 'click', function() {
        $(this).parent().find('.t').removeClass('rightshapeactive');
        $(this).find('.t').addClass('rightshapeactive');
    });
});