title: Jquery mouseover value
body: <p>I have the following html which I use to rate price range:</p>
  
  <pre><code>&lt;li class='voteable-attribute off clearfix' id='attributes_price_range'&gt;
              &lt;label class='primary formField'&gt;Price Range:
              &lt;/label&gt;
                      &lt;fieldset id='price_choices'&gt;
          &lt;legend class='offscreen'&gt;Price Range:&lt;/legend&gt;
              &lt;p class='offscreen'&gt;Price per person:&lt;/p&gt;
          &lt;ul class='clearfix price-0'&gt;
              &lt;li&gt;
                  &lt;input type='radio' id='price-1' name='RestaurantsPriceRange2' value='1'&gt;               &lt;label for='price-1' class='offscreen'&gt;
                      Cheap, Under $10
                  &lt;/label&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;input type='radio' id='price-2' name='RestaurantsPriceRange2' value='2'&gt;               &lt;label for='price-2' class='offscreen'&gt;
                      Moderate, $11 - $30
                  &lt;/label&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;input type='radio' id='price-3' name='RestaurantsPriceRange2' value='3'&gt;               &lt;label for='price-3' class='offscreen'&gt;
                      Spendy, $31 - $60
                  &lt;/label&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;input type='radio' id='price-4' name='RestaurantsPriceRange2' value='4'&gt;               &lt;label for='price-4' class='offscreen'&gt;
                      Splurge, Over $61
                  &lt;/label&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/fieldset&gt;
              &lt;span class='no-js-hidden pseudoLink' id='price_tip' title='' style='cursor: auto;'&gt;Price per person:&lt;/span&gt;
          &lt;span class='no-js-hidden' id='price_range'&gt;Roll over price, then click to vote &lt;/span&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>These are my js code where we mouse over to any li within ul the ul class which by default price-0 will be replaced with id of current selected li.</p>
  
  <p>Here is my javascript. I want the class <code>price-0</code> of the <code>ul</code> to change to the id of the <code>li</code> that you hover over.</p>
  
  <pre><code>$('#price_choices ul').mouseover(function(){
          var val = $(this).find('li input').attr('value');
  
          $(this).removeClass(/price-[a-zA-Z0-9_]*/g, '');
          $(this).addClass('price-'+val+'');
  
      });
  </code></pre>
  
  <p>How can I replace the classname with the id specified? My current code simply adds the class and I end up with a list of classes that looks like this <code>price-0 price-1 price-2..</code> etc</p>