Question

Example:

<div>
    <A><span class="bla">test</span></a>
    <A><span class="bla">test test</span></a>
    <A><span class="bla">test test test</span></a>
</div>

Just wondering if we could do something like this:

$('span.bla').click(function(){
   $(this).addClass('selected').others_with_this_class().removeClass('selected');
});

Or would we really need to make two different selectors, and process them one by one.

EDIT:

Thanks everyone with ideas, I found up doing something like this: 🙂

if (!$(this).hasClass('selected'))
$(this).addClass('selected').parent().siblings('a').children('.selected').removeClass('selected');

Answer 1

Use $.siblings():

$('span.bla').click(function(){
    $(this).addClass('selected')
           .parent()
           .siblings()
           .children('span')
           .removeClass('selected');
});

This will find the parent of the span (<a>), all it’s siblings, and any <span>s that are children of those siblings, and add .current to them.