title: jquery set previous div class
body: <p>I have some jQuery that sets an image as a radio button for a star rating system. I wish to include a function that when the user cicks a radio button the image changes to checked and the previous radios are also change to checked.</p>
  
  <p>I have managed to change the class of the checked button and I have some code that would change the class on the previous buttons also, but on a simpler div structure. I have been able to combine the both.</p>
  
  <p>The code to change the class for the radio button</p>
  
  <pre><code>$(function() {
      $('input:radio').each(function() {
          $(this).hide();
          $('&lt;a title=" check me " class="radio-fx '+this.name+'" href="#"&gt;&lt;div class="radio"&gt;&lt;/div&gt;&lt;/a&gt;').insertAfter(this);
      });
      $('.radio-fx').live('click',function(e) {
          e.preventDefault();
          $check = $(this).prev('input');
          var unique = '.'+this.className.split(' ')[1]+' div';
          $(unique).attr('class', 'radio');
          $(this).find('div').attr('class', 'radio-checked');
          $check.attr('checked', true);
      });
  
  });
  </code></pre>
  
  <p><strong>html:</strong></p>
  
  <pre><code>                  &lt;div class="voteGroup"&gt;
                          &lt;input type="radio" id="price_0" value="1" name="price" style="display: none;" checked="checked"&gt;
                          &lt;a href="#" class="radio-fx price" title=" check me "&gt;
                              &lt;div class="radio-checked"&gt;&lt;/div&gt;
                          &lt;/a&gt;
                          &lt;input type="radio" id="price_1" value="2" name="price" style="display: none;" checked="checked"&gt;
                          &lt;a href="#" class="radio-fx price" title=" check me "&gt;
                               &lt;div class="radio"&gt;&lt;/div&gt;
                          &lt;/a&gt;
                          &lt;input type="radio" id="price_2" value="3" name="price" style="display: none;" checked="checked"&gt;
                          &lt;a href="#" class="radio-fx price" title=" check me "&gt;
                                &lt;div class="radio"&gt;&lt;/div&gt;
                          &lt;/a&gt;
  
                      &lt;/div&gt;
  </code></pre>
  
  <p>Code that I tried to integrate to set previous ones to checked on hover:</p>
  
  <pre><code>        $('.radio-fx').hover(
              // Handles the mouseover
              function() {
                  $(this).prevAll().andSelf().addClass('radio-checked');
                  $(this).nextAll().removeClass('radio');
              },
              // Handles the mouseout
              function() {
                  $(this).prevAll().andSelf().removeClass('radio');
              }
          );
  </code></pre>
  
  <p>Thanks for any help.</p>