problem with jquery each and swich between 2 things

Question

first see this post i got this code

$('.yesno').click(function(){
    $('.yesno').each(function(i, v){
        $(v).removeClass('selected');
    });
    $(this).addClass('selected');

     return false;
});

and html this

    <a href="#">
    <span  class="Yes yesno">Yes</span>
</a>

<a href="#">
    <span class="No yesno">No</span>

no the problem when i make more than one vote iam get very big problem

see this

<a href="#">
    <span  class="Yes yesno">Yes</span>
</a>

<a href="#">
    <span class="No yesno">No</span>
</a>
<a href="#">
    <span  class="Yes yesno">Yes</span>
</a>

<a href="#">
    <span class="No yesno">No</span>
</a>
</a>

when click first yes it make it selected and when iam going to the next yes when click its because selected but the first yes became unselected

i want make some thin make each yes and know is differant of others

Answer 1

Change your html to this (Added divs around groups of links, could be any element, or you could do it with a rel attribute on the href too).

<div class="linkgroup">  
  <a href="#">
      <span  class="Yes yesno">Yes</span>
  </a>

  <a href="#">
      <span class="No yesno">No</span>
  </a>
</div>

<div class="linkgroup">  
  <a href="#">
      <span  class="Yes yesno">Yes</span>
  </a>

  <a href="#">
      <span class="No yesno">No</span>
  </a>
</div>

Then JS something like:

$('.yesno').click(function(){
    $(this).parents('.linkgroup').find('.yesno').each(function(i, v){
        $(v).removeClass('selected');
    });
    $(this).addClass('selected');
    return false;
});

(There's also a sibling selector for jquery, which may make the code a bit cleaner, but not familiar with it).

Answer 2

$('.yesno').click(function(){
    $(this).parents('.linkgroup').find('.yesno').each(function(i, v){
        $(v).toggleClass('selected');
    });
    $(this).toggleClass('selected');
    return false;
});